Minificador y Formateador de CSS

Cómo minificar o embellecer CSS

1. Pega tu CSS en la caja de arriba, una hoja de estilos completa, el contenido de un bloque <style>, o una sola regla.
2. Elige Minificar (el valor por defecto, para publicar un archivo más pequeño) o Embellecer (para dar formato legible a CSS ya minificado), y un tamaño de sangría si estás embelleciendo, luego haz clic en Minificar CSS.
3. El resultado aparece instantáneamente debajo: un comentario de una línea reportando el tamaño en bytes antes/después y una estimación real de tamaño gzip, seguido de tu CSS minificado o embellecido.
4. Haz clic en Copiar al portapapeles para obtener el resultado, o pega algo nuevo y vuelve a ejecutarlo.

Sin archivo que subir, sin herramienta de build que configurar, solo pega y lee.

Por qué minificar CSS

Cada byte de CSS que un navegador descarga antes de poder renderizar una página añade al tiempo que un visitante pasa mirando una pantalla en blanco o sin estilo, y las hojas de estilos escritas a mano o generadas están llenas de bytes que no hacen nada por el renderizado: sangría, comentarios, puntos y coma finales, unidades redundantes de 0px, y selectores duplicados que podrían haberse combinado. Nada de eso afecta a cómo se ve la página; todo cuesta tiempo de descarga, especialmente en conexiones móviles donde cada kilobyte importa tanto para la velocidad de carga como para el plan de datos del visitante.

Esta herramienta elimina todo eso en un clic, quitando espacios en blanco y comentarios, colapsando valores redundantes como 0px 0px 0px 0px a 0, y fusionando selectores que acaban con declaraciones idénticas, mientras deja el comportamiento real de tu CSS completamente sin cambios.

Minifica para producción, embellece para leer

Un pipeline de build (webpack, Vite, un compilador de Sass) suele minificar el CSS automáticamente antes del despliegue, pero mucho CSS del mundo real nunca pasa por uno: una hoja de estilos pegada de un tema de CMS, un fragmento copiado de un tutorial, o un bloque <style> puntual escrito a mano para una página de aterrizaje. El modo Minificar de esta herramienta cubre ese hueco sin instalar nada.

El problema inverso también surge, estás mirando una hoja de estilos de producción que se publicó minificada sin mapa de fuente, y necesitas realmente leerla o depurarla. El modo Embellecer vuelve a sangrar esa misma línea ilegible en CSS correctamente formateado, con una declaración por línea, con el ancho de sangría que elijas, así que puedes ver qué está pasando realmente antes de cambiar nada.

Privado, porque tu hoja de estilos nunca sale de tu dispositivo

Una hoja de estilos puede decir más sobre un producto de lo que parece, convenciones internas de nombrado de clases, feature flags codificados como clases CSS, o un diseño sin publicar que todavía no se ha lanzado públicamente. Muchas webs de “minificador de CSS online gratis” silenciosamente redirigen el contenido pegado a través de un backend. Esta herramienta ejecuta todo el paso de minificar/embellecer usando las librerías de código abierto csso y js-beautify cargadas una vez en tu propia pestaña del navegador, nada se transmite, registra ni almacena, y funciona idénticamente sin conexión una vez que la página ha cargado.

Usos habituales

• Reducir una hoja de estilos escrita a mano o exportada de un CMS antes de desplegarla, sin configurar un pipeline de build solo para este archivo.
• Comprobar cuánto más pequeña (y cuánto más pequeña tras gzip) se vuelve una hoja de estilos antes de comprometerte con un paso de minificación en un proceso de build real.
• Reformatear una hoja de estilos de producción minificada de vuelta en código legible para depurar un problema de renderizado sin mapa de fuente disponible.
• Limpiar CSS pegado de un tutorial, una respuesta de Stack Overflow, o la respuesta de un asistente de IA antes de añadirlo a un proyecto.
• Combinarlo con el Formateador de JSON cuando la configuración o consulta de un proyecto necesite la misma limpieza antes/después que su hoja de estilos.
• Comparar dos versiones de una hoja de estilos para ver exactamente qué cambió, consulta el Comparador de Textos compañero para comparar CSS antes y después de una edición.
• Formatear o validar un archivo de configuración XML o sitemap de la misma forma que formatearías una hoja de estilos.
• Minificar el fragmento CSS de @font-face que genera un conversor de fuentes web junto con una fuente recién convertida.