Minificador CSS
Minifica tu código CSS para producción
CSS de entrada
CSS minificado
Ejemplos de minificación CSS
El CSS formateado es legible; el CSS minificado es compacto para producción. Ejemplo:
Estilos de contenedor y botón
Entrada formateada:
Salida minificada:
Usa Ejemplo de arriba para cargar más datos de ejemplo.
¿Qué es un minificador CSS?
Los archivos CSS usan espacios en blanco, comentarios e indentación para legibilidad. En producción, archivos más pequeños cargan más rápido. Un minificador CSS elimina espacios innecesarios, comentarios y acorta valores donde es seguro para reducir el tamaño del archivo. Las especificaciones W3C CSS definen el lenguaje; la minificación preserva el comportamiento reduciendo bytes.
Esta herramienta analiza tu CSS y genera una versión compacta. La minificación se ejecuta completamente en tu navegador. No se envía nada a ningún servidor. Para formatear CSS minificado, usa el Formateador CSS. Para validar, el Validador CSS.
Cómo usar esta herramienta
Pegar o subir CSS
Copia tu CSS y pégalo en el editor izquierdo. También puedes hacer clic en Subir para cargar un archivo .css. El botón Ejemplo carga datos de ejemplo. El CSS inválido mostrará un error.
Ver la salida minificada
El panel derecho muestra el CSS compacto. Se eliminan espacios en blanco y comentarios. La salida es CSS válido—el comportamiento se preserva. El CSS inválido mostrará un error en la salida.
Copiar o descargar
Usa Copiar para poner el resultado en el portapapeles o Descargar para guardarlo. Para SCSS o Less, compila primero con SCSS a CSS o Less a CSS, luego minifica.
Cómo funciona el minificador
La herramienta elimina espacios en blanco, saltos de línea y comentarios de tu CSS. Los valores pueden acortarse donde sea seguro (p. ej. 0px a 0, #ffffff a #fff). La salida sigue siendo válida según la especificación W3C CSS. Herramientas de build como cssnano o PostCSS ofrecen optimización más agresiva; esta herramienta proporciona minificación rápida en el navegador.
Cuándo ayuda la minificación CSS
Los sitios web de producción se benefician de archivos CSS más pequeños. La minificación reduce el tamaño de la carga, mejora los tiempos de carga y ahorra ancho de banda. Herramientas de build como Webpack, Vite o Parcel suelen minificar automáticamente, pero esta herramienta es útil para archivos puntuales, comprobaciones rápidas o cuando no hay un paso de build.
Las plantillas de email, estilos embebidos o CSS alojado en CDN suelen necesitar minificación manual. Pasar tu hoja de estilos por aquí te da salida lista para producción. Para añadir prefijos de vendor antes de minificar, usa el Prefijador CSS. Para formatear CSS minificado de vuelta a forma legible, usa el Formateador CSS.
Preguntas frecuentes
¿La minificación rompe el CSS?
No. Solo se eliminan espacios en blanco y comentarios. Los selectores, propiedades y valores se mantienen. La salida es CSS válido. Algunos minificadores pueden acortar valores (p. ej. 0px a 0)—el comportamiento se preserva.
¿Mis datos son privados?
Sí. La minificación se ejecuta completamente en tu navegador. No se envía ningún dato a ningún servidor.
¿Qué pasa con los source maps?
Esta herramienta no genera source maps. Para builds de producción con source maps, usa una herramienta de build como PostCSS, cssnano o el minificador de tu bundler.
¿Soporta SCSS o Less?
Esta herramienta minifica CSS plano. Para SCSS o Less, compila primero con SCSS a CSS o Less a CSS, luego minifica la salida.
¿Cuánto más pequeño se vuelve?
Típicamente 20–40 % más pequeño según espacios en blanco y comentarios. CSS muy comentado o formateado puede ver mayores ahorros. La reducción exacta depende de tu entrada.
Herramientas relacionadas
Para la especificación CSS: W3C CSS. MDN CSS es la referencia. cssnano y PostCSS ofrecen minificación avanzada en tiempo de build.