CSS reset moderno (generador)
Marca las reglas. Cada una tiene un comentario corto que explica qué corrige, así puedes entenderlo y ajustarlo en vez de copiar a ciegas.
Cómo usarEl CSS que va al comienzo de todo sitio
CSS reset moderno (generador): para qué sirve
Todo proyecto empieza corrigiendo las mismas cosas: márgenes predeterminados, box-sizing, imágenes que desbordan el diseño, campos de formulario con otra fuente y palabras largas que rompen la pantalla en el celular.
Marca las reglas que quieras y copia un reset corto y comentado, con box-sizing border-box, altura mínima en dvh, medios responsivos, font: inherit en los formularios, overflow-wrap, text-wrap balance y pretty en títulos y párrafos, desplazamiento suave solo para quien no pidió menos movimiento y la desactivación de las animaciones para quien sí lo pidió.
Cómo usar
- Marca las reglas que quieras usar.
- Lee el comentario de cada una.
- Copia o descarga el reset.css y ponlo al inicio de tu CSS.
Cuándo usar
- Empezar un sitio desde cero.
- Estandarizar los proyectos del equipo.
- Entender qué hace cada regla de reset.
Preguntas frecuentes
¿Qué es un CSS reset?
Un conjunto pequeño de reglas colocado al inicio del CSS para quitar diferencias y valores predeterminados molestos de los navegadores, como márgenes en el body, imágenes que desbordan el diseño y campos de formulario con otra fuente. Facilita escribir el resto del CSS.
¿Reset o normalize?
normalize.css conserva los estilos predeterminados y solo corrige las diferencias entre navegadores; un reset moderno va un poco más allá y elimina lo que casi siempre se sobrescribe. Los navegadores actuales son mucho más parecidos entre sí, por eso los resets cortos como este se volvieron los más usados.
¿Por qué el desplazamiento suave va dentro de una media query?
El desplazamiento animado puede causar mareo en quien es sensible al movimiento. Dentro de prefers-reduced-motion: no-preference, solo se activa para quien no pidió menos movimiento en el sistema.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.