Minificador CSS

Pega una hoja de estilos para eliminar espacios y comentarios, acortar valores como #ff0000 → red y fusionar reglas duplicadas con las optimizaciones estructurales de CSSO.

Funciona en tu navegadorSin registroNo se sube nada

Salida minificada

Cómo usar: Minificador CSS

  1. Pega CSS o abre un archivo .css.
  2. Deja activado Reestructurar para fusionar reglas y declaraciones, o desactívalo para una pasada segura que solo quite espacios.
  3. Deja activado Conservar comentarios de licencia para mantener los avisos /*! … */.
  4. Compara los tamaños original, minificado y comprimido con gzip.
  5. Copia el resultado o descarga output.min.css.

Cómo funciona la minificación de CSS

Esta herramienta usa CSSO (CSS Optimizer), que analiza tu hoja de estilos en un árbol sintáctico y la vuelve a imprimir en la forma equivalente más corta. Además de quitar espacios y comentarios, aplica reescrituras seguras de valores:

  • #ffffff → #fff, #ff0000 → red
  • 0px → 0, 0.90 → .9
  • margin: 8px 16px 8px 16px → margin:8px 16px
  • Se eliminan las reglas vacías y las declaraciones duplicadas

¿Qué hace «reestructurar»?

La reestructuración analiza toda la hoja de estilos: las reglas con declaraciones idénticas se fusionan en una sola lista de selectores (.a,.b{color:red}) y los selectores repetidos se combinan. Esto suele ahorrar otro 5–15 % en hojas de estilo reales. CSSO solo fusiona cuando el orden de la cascada se mantiene, pero si dependes de sobrescrituras poco habituales puedes desactivarla para una minificación puramente sintáctica.

¿Por qué minificar CSS?

El CSS bloquea el renderizado: el navegador no puede pintar la página hasta descargar y analizar las hojas de estilo del <head>. Un CSS más pequeño significa un First Contentful Paint más rápido y mejores Core Web Vitals, lo que beneficia tanto a los usuarios como al posicionamiento en buscadores. Combina la minificación con gzip o Brotli en el servidor para obtener el mejor resultado.

Preguntas frecuentes

¿Es seguro minificar CSS?
Sí. Los espacios y comentarios no afectan a cómo se renderiza el CSS, y las reescrituras de valores de CSSO son equivalentes según la especificación. La reestructuración respeta el orden de la cascada; desactívala si quieres la salida más conservadora.
¿Admite CSS moderno como propiedades personalizadas, anidamiento y @layer?
Sí. Se conservan las propiedades personalizadas (--var), @media, @supports, @layer, @container y la sintaxis de grid.
¿Puedo desminificar el CSS después?
Cualquier formateador puede volver a indentar el CSS minificado, pero los comentarios eliminados no se pueden recuperar. Conserva tu archivo fuente original y trata el archivo minificado como un resultado del build.
¿Se sube mi hoja de estilos a algún sitio?
No. La minificación se ejecuta en tu navegador; no se envía nada a ningún servidor.

Herramientas relacionadas

Minificador JavaScript Comprime y ofusca nombres en JS con Terser, con tamaño y gzip. Minificador HTML Quita comentarios y espacios, y minifica CSS/JS en línea. Formateador SQL Formatea o minifica SQL para PostgreSQL, MySQL, T-SQL, BigQuery y más. Formateador JSON Formatea, minifica y valida JSON con errores por línea y columna.