Minificar CSS online – Comprime o embellece tu CSS
Reduce tus hojas de estilo o vuelve legible un CSS minificado. El minificador quita comentarios y espacios sin romper calc(), cadenas ni selectores; el embellecedor da formato con sangrías limpias.
Pega tu CSS y elige Minificar o Embellecer. Minificar quita comentarios (puedes conservar las notas de licencia /*!), espacios, espacios alrededor de llaves, dos puntos y comas, y el último punto y coma de cada bloque, y muestra los bytes ahorrados. Embellecer pone cada declaración en su propia línea con sangría.
Cómo usar la herramienta: Minificador y embellecedor de CSS
- Pega tu CSS.
- Elige Minificar o Embellecer.
- Decide si quieres conservar los comentarios de licencia /*!.
- Revisa la diferencia de tamaño.
- Copia o descarga el resultado.
Qué elimina la minificación de CSS
La minificación borra todo lo que el navegador ignora: comentarios, sangrías, saltos de línea, espacios alrededor de { } : ; , > y ~, y el último punto y coma antes de cada llave de cierre. Las reglas no cambian, así que la página se ve exactamente igual.
| Antes | Después |
|---|---|
| `.card > h2 , .card + .card {` | `.card>h2,.card+.card{` |
| `margin : 0 auto ;` | `margin:0 auto;` |
| `calc( 1rem + 2vw )` | `calc(1rem + 2vw)` |
| `/ comentario /` | eliminado |
Minificación segura
Algunos espacios importan. Dentro de calc() los espacios alrededor de + y − son obligatorios, así que se mantienen. Las cadenas entre comillas, como valores de content o nombres de fuentes, se copian sin cambios. Un espacio antes de los dos puntos en un selector (`a :hover`) cambia el significado, por eso solo se quitan los espacios después de los dos puntos. Los comentarios de licencia que empiezan por /*! se conservan por defecto porque muchas licencias de código abierto los exigen.
Embellecer CSS minificado
¿Tienes un archivo minificado de una plantilla o framework y necesitas leerlo o editarlo? Cambia a Embellecer. Cada regla empieza en una línea nueva, las declaraciones llevan sangría y cada selector de una lista va en su propia línea. Las media queries y otras reglas @ se sangran un nivel más.
¿Cuánto se ahorra?
Las hojas de estilo escritas a mano suelen reducirse un 15–35 %. Junto con gzip o Brotli y eliminando reglas sin usar, el CSS minificado carga antes y bloquea el renderizado menos tiempo. El CSS bloquea el renderizado, así que cada kilobyte en la ruta crítica afecta al Largest Contentful Paint.
Conserva el original
Guarda siempre la hoja de estilos legible en tu control de versiones y minifica una copia al publicar, para no tener que editar nunca un archivo minificado a mano.
Herramientas relacionadas
Minifica el HTML con el Minificador de HTML, convierte píxeles con Conversor de px a rem y crea el CSS de sombras, degradados y esquinas con el Generador de box-shadow CSS, el Generador de degradados CSS y el Generador de border-radius. Todo funciona en tu navegador.
También te pueden servir estas herramientas gratis: Formateador JSON, Generador de contraseñas y Probador de regex.
Preguntas frecuentes
¿Cómo minifico CSS?
Pega tu CSS en la herramienta con Minificar seleccionado y copia el resultado.
¿Minificar puede romper mi CSS?
No. Se mantienen los espacios que importan, como dentro de calc(), y las cadenas no cambian.
¿Cómo desminifico CSS?
Cambia a Embellecer para dar formato con sangrías y saltos de línea.
¿Debo conservar los comentarios de licencia?
Sí, si el código es de un proyecto de código abierto. Los que empiezan por /*! se conservan por defecto.
¿Se sube mi CSS?
No. Todo se procesa en tu navegador.
Última actualización: