Minificar CSS en línea — Minificador CSS

Minifica CSS al instante con nuestra herramienta en línea gratuita. Selecciona, reordena, concatena y minifica varios archivos .css como un solo bundle con tus opciones actuales. Todo el procesamiento ocurre en tu navegador.

Cargando…

Minificación CSS

Minificar CSS en línea con CSSO. Comprimir hojas de estilo para producción — procesamiento instantáneo en el navegador.

Funcionalidades

Reduzca el tamaño de tu código CSS eliminando espacios, comentarios y caracteres innecesarios.

Minificar

Reduzca el tamaño de tu código CSS eliminando espacios, comentarios y caracteres innecesarios.

Paquete utilizado

CSSO

v5.0.5

CSSO (CSS Optimizer) es una herramienta potente para optimizar archivos CSS eliminando redundancias y comprimiendo el código.

Ejemplo básico

CSS de entrada

.container {
  margin: 20px;
  padding: 10px;
  background-color: #ffffff;
}

.button {
  color: #000000;
  font-size: 16px;
  border: 1px solid #cccccc;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

CSS minificado

.container{margin:20px;padding:10px;background-color:#fff}.button{color:#000;font-size:16px;border:1px solid #ccc}.card{display:flex;flex-direction:column;gap:12px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.12)}

Guía de optimización de CSS

Qué hace la minificación CSS

La minificación CSS reescribe una hoja de estilo en una forma más corta que sigue pintando igual. Los selectores, la cascada y los nombres de clase siguen siendo el contrato con su HTML — un minificador no renombra .header como el mangling JavaScript acorta variables locales. El resultado sigue siendo CSS, no un zip: código fuente más denso, no un archivo codificado. Las hojas de estilo escritas a mano suelen reducirse entre un 20 y un 40 % de los bytes originales antes de gzip o Brotli. Esos bytes extra en la red son otra capa; gzip y Brotli siguen siendo importantes tras el despliegue. La minificación no es eliminación de CSS no utilizado. PurgeCSS, el escaneo de contenido de Tailwind o pipelines similares eliminan reglas que su markup nunca usa — eso es un paso de build, no esta herramienta. Consulte tree shaking vs minificación y la guía de minificación CSS. Tampoco es extracción de critical CSS: extraer reglas above-the-fold, incrustarlas y cargar el resto de forma asíncrona es un flujo de trabajo aparte. Esta página minifica el CSS que pegue, incluido un bloque crítico ya extraído. Compilar SCSS o LESS es otra herramienta. El minificador HTML de FastMinify no ejecuta CSSO sobre elementos style ni atributos style inline — preserva ese CSS mientras compacta el markup.

Cómo FastMinify minifica CSS

Esta página ejecuta CSSO (CSS Optimizer) íntegramente en tu navegador. CSSO parsea con CSSTree, comprime (colores más cortos, 0px → 0, comentarios eliminados si lo solicita) y luego reestructura opcionalmente los bloques de reglas. La barra de herramientas tiene dos controles de minificación. El nivel de compresión se corresponde con los flags restructure y merge de CSSO. Conservador desactiva la reestructuración y luego reinserta saltos de línea para que el resultado siga siendo legible — la vista previa más segura, no el archivo más pequeño. Normal minifica y fusiona sin reescribir el orden de cascada. Agresivo habilita restructure, que puede fusionar y dividir rulesets; es más pequeño, pero las suposiciones de orden de origen pueden cambiar. Deje Agresivo desactivado si depende de una cascada delicada. Eliminar comentarios es el otro interruptor. Activado (por defecto), los comentarios desaparecen. Desactivado, FastMinify conserva el texto de los comentarios reemplazando el resultado de CSSO por una copia de su fuente con espacios compactados — conserva /* */ a costa de menores ganancias de tamaño. CSSO sigue acortando colores, selectores duplicados adyacentes y espacios en selectores por su cuenta; no son interruptores de la barra. Pegar y minificar sirve para un archivo o unos pocos; la concatenación en esta página fusiona primero y luego ejecuta el mismo pipeline. Las aplicaciones de producción siguen perteneciendo al build. Para Webpack, Vite o CI, consulte la guía de minificación CSS.

Opciones de minificación

Nivel de compresión

Controla la agresividad de la compresión CSS

ConservativeConservador — sin fusión ni reestructuración; la salida se reindenta para legibilidad

NormalNormal — minificar y fusionar, manteniendo el orden de cascada

AggressiveAgresivo — reestructura rulesets; más pequeño, pero el orden de origen puede cambiar

Eliminar comentarios

Elimina todos los comentarios CSS del código

Comparación con/sin la opción:

Código original

/* Header styles */
.header {
    background: #fff;
    padding: 20px;
}

/* Navigation */
.nav { display: flex; }

Con removeComments: true

.header{background:#fff;padding:20px}.nav{display:flex}

Con removeComments: false

/* Header styles */.header{background:#fff;padding:20px}/* Navigation */.nav{display:flex}

Diferencia

Los comentarios CSS se eliminan

Qué hace CSSO automáticamente

No son interruptores adicionales de la barra de herramientas. El acortamiento de colores y el compactado de selectores se ejecutan con CSSO; la fusión de reglas adyacentes sigue el nivel de compresión (desactivada en Conservador).

Valores de color más cortos

Los colores con nombre, hex, rgb() y hsl() se reescriben a un equivalente más corto cuando CSSO puede demostrar que es seguro.

Fuente

.button {
    background: #ff0000;
    color: rgb(255, 255, 255);
    border: 1px solid hsl(0, 100%, 50%);
}

Después de CSSO

.button{background:red;color:#fff;border:1px solid red}

Selectores idénticos adyacentes

Dos bloques con el mismo selector pueden fusionarse en uno en Normal y Agresivo. Conservador los mantiene separados.

Fuente

.header {
    background: #fff;
    padding: 20px;
}
.header {
    margin: 10px;
}

Después de CSSO

.header{background:#fff;padding:20px;margin:10px}

Espacios en selectores

Los combinadores y espacios alrededor de los selectores se compactan. Los nombres de clases e identificadores no se renombran.

Fuente

div.container > ul li:first-child {
    color: red;
}

div.container > ul li:last-child {
    color: blue;
}

Después de CSSO

div.container>ul li:first-child{color:red}div.container>ul li:last-child{color:blue}

Ver opciones de indentación de Embellecer →

Más información sobre esta acción →

Concatenar archivos CSS

En Minificar CSS, seleccione o suelta varios archivos .css, reordénelos y luego concatene y minifica el bundle completo una vez con sus opciones actuales. El procesamiento permanece en tu navegador. Los marcadores de archivo, comentarios y espacios extra opcionales se añaden antes de la minificación y pueden eliminarse de la salida final.

Preguntas frecuentes — Minificar

Todo sobre la minificación

¿Por qué minificar CSS?

La minificación elimina espacios, comentarios y reglas redundantes. Los ahorros típicos son del 20 al 40 % de los bytes originales antes de gzip, con renderizado idéntico.

¿Necesita desminificar CSS?

Usa nuestro desminificador CSS para restaurar un formato legible.

¿Necesita embellecer CSS?

Usa nuestro embellecedor CSS para un formato coherente de hojas de estilo.

¿Mi CSS se procesa de forma segura?

Todo el procesamiento se ejecuta en tu navegador — no se sube nada.

¿Cómo concateno y minifico varios archivos CSS?

En Minificar CSS, utilice el botón de concatenación o suelta dos o más archivos .css en el panel de entrada, reordénelos y luego concatene y minifica el bundle completo una vez con sus opciones actuales. Todo se ejecuta en tu navegador. Este flujo no está disponible en Embellecer CSS ni Desminificar CSS, y los marcadores, comentarios o espacios extra pueden eliminarse durante la minificación.

Compruébalo tú mismo

FastMinify procesa la entrada en el navegador. Inspecciona el panel de red o lee nuestra puerta de validación para confirmar que nada sale del dispositivo.

Abrir la puerta de validación →

Minificar

Reduce código y assets para producción — minifica JavaScript, CSS, HTML, JSON y XML antes de gzip o un despliegue CDN.

Minificar JS

Minificar JSON

Minificar HTML

Minificar XML

Minificar SVG

Minificar SQL

Minificar YAML

Minificar TOML

Explorar otras categorías de herramientas

Embellecer

Haz el código legible con una indentación coherente — embellece JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML y más en tu navegador.

Desminificar

Expande código minificado o comprimido — desminifica JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML y otros formatos al depurar o revisar.

Conversión

Transforma datos entre JSON, YAML, XML y CSV en local — sin subidas a un servidor.

Preprocesadores CSS

Compila SCSS o LESS a CSS estándar en el navegador — combínalo con embellecer o minificar para un flujo de hoja de estilos completo.

Herramientas JSON

Valida, formatea, compara y explora payloads JSON — complementarias a minificadores y convertidores.

Herramientas SVG

Previsualiza, optimiza con SVGO, exporta Data URI, redimensiona, embellece, convierte a JSX y valida SVG — todo en tu navegador.

DevOps e Infra

Formato, validación y minificación de Terraform HCL, formato y lint de Dockerfile, validación de Docker Compose y .env.

CI/CD

GitHub Actions y GitLab CI — formatear YAML y comprobar la estructura de workflows/jobs en el navegador.

Logs y observabilidad

JSON/NDJSON línea a línea y access logs de Nginx/Apache — formato, filtro, validación y CSV/TSV.

Kubernetes

Manifiestos multi-doc, validación estructural, starters Ingress/Deployment y formato de values de Helm.

Red / IP

CIDR, subredes y ayudas IPv4/IPv6 — en tu navegador.

Seguridad y tokens

JWKS, certificados X.509 y escaneo de secretos — en local en el navegador.

API y esquemas

Herramientas OpenAPI para formatear, validar y analizar tus specs.

Codificación

Codifica o decodifica Base64, componentes URL y entidades HTML — solo en el cliente.

Utilidades para desarrolladores

Timestamps, UUID, ULID, Nanoid, cron, contraseñas, regex, slugify, bases numéricas, mayúsculas, diff de texto y chmod — todo en el cliente.

Texto y Markdown

Cuenta palabras, genera TOC Markdown y limpia listas de líneas — todo en tu navegador.

IA y LLM

Conteo de tokens, estimación de costes y ajuste a la ventana de contexto — 100 % en el navegador.

Datos de prueba

Valores de campo sintéticos para fixtures y seed de BD — primero números de teléfono en rangos reservados.

Serialización

Serializa y deserializa estructuras PHP junto a los flujos JSON.