Código & Validação

Gerador de CSS Reset

Gere um CSS Reset ou Normalize personalizado para começar seu projeto com uma base limpa.

3 usos

92 linhas

/* Modern CSS Reset — gerado por htmly.com.br/tools/css-reset-generator */

/* Box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove margins */
* {
  margin: 0;
  padding: 0;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Set shorter line heights on headings */
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  line-height: 1.2;
}

/* Balanced text wrapping on headings */
h1, h2, h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Responsive images */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Avoid text overflows */
p, li, figcaption {
  overflow-wrap: break-word;
}

/* Text wrapping for long content */
p {
  text-wrap: pretty;
}

/* Remove list styles on ul, ol elements with a list role */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Remove all animations and transitions for reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Como usar o Gerador de CSS Reset

  1. 1

    Escolha o tipo de reset

    Selecione entre Modern Reset (completo e atualizado), Normalize (corrige inconsistências sem remover estilos úteis) ou Minimal Reset (apenas o essencial para projetos rápidos).

  2. 2

    Configure as opções

    Revise o código gerado e veja quantas linhas cada opção possui. O Modern Reset inclui acessibilidade e tipografia; o Normalize preserva estilos padrão úteis.

  3. 3

    Copie o CSS

    Clique em "Copiar CSS" ou "Download .css" para obter o arquivo. Cole no início do seu stylesheet, antes de qualquer outro estilo.

O que é CSS Reset?

CSS Reset é um conjunto de regras que remove ou normaliza os estilos padrão aplicados pelos navegadores. Cada browser (Chrome, Firefox, Safari) tem seu próprio stylesheet interno, causando diferenças visuais em margens, tamanhos de fonte e espaçamentos. Um Reset zera tudo para começar do zero, enquanto um Normalize corrige apenas as inconsistências, preservando estilos úteis. O Modern Reset combina o melhor dos dois mundos: remove margens desnecessárias, configura box-sizing, melhora a tipografia e adiciona suporte a acessibilidade com prefers-reduced-motion.

Perguntas frequentes

Qual a diferença entre Reset e Normalize?
O Reset remove todos os estilos padrão do navegador, zerando margens, paddings e tamanhos. O Normalize apenas corrige inconsistências entre navegadores, mantendo estilos úteis como tamanho de h1 e margens de parágrafos.
Devo usar CSS Reset em todo projeto?
Sim, é uma boa prática. Um reset garante que seu site tenha aparência consistente em todos os navegadores. Frameworks como Tailwind CSS já incluem um reset embutido (Preflight).
O CSS Reset afeta a performance?
O impacto é mínimo. Um reset típico tem menos de 1KB e é processado rapidamente pelo navegador. O benefício de consistência visual compensa amplamente o custo negligível de performance.
Onde colocar o CSS Reset no meu projeto?
O reset deve ser o primeiro arquivo CSS carregado, antes de qualquer outro estilo. Isso garante que seus estilos personalizados sobrescrevam os valores resetados.

Publique seu site HTML em 30 segundos

Publicar agora