Formateador, Embellecedor y Minificador CSS

Formatea, embellece y minifica CSS al instante en tu navegador. Limpia hojas de estilo desordenadas o comprímelas para producción — gratis, privado, tu CSS nunca sale de tu dispositivo.

Sin rastreo Se ejecuta en el navegador Gratis

Entrada CSS

Sangría

CSS formateado

🔒 100% en el navegador — tu CSS nunca sale de tu dispositivo.

Revisado para formateo seguro en renderizado y minificación sin pérdida — Equipo de Ingeniería de Go Tools · Jun 5, 2026

¿Qué es el formateo de CSS?

El formateo de CSS (también llamado embellecimiento o pretty-printing) reescribe una hoja de estilo con sangría, saltos de línea y espaciado consistentes para que su estructura sea fácil de leer y revisar. Los estilos se renderizan de forma idéntica antes y después — solo cambian los espacios en blanco. La minificación hace lo contrario: elimina los comentarios y colapsa el CSS al mínimo posible para que las páginas carguen más rápido. Esta herramienta hace ambas cosas, enteramente en tu navegador.

Características principales

Formatear y minificar

Embellece CSS desordenado para mejorar la legibilidad o comprímelo al mínimo — en una sola herramienta.

Indicador de bytes ahorrados

Consulta exactamente cuántos bytes ahorró la minificación para conocer el impacto en el payload.

100% privado

Todo el procesamiento ocurre en tu navegador. Tu CSS nunca se envía a un servidor.

Controles de estilo

Elige sangría de 2 espacios, 4 espacios o tabulación para adaptarte a las convenciones de tu equipo.

Ejemplos

Conjunto de reglas minificado

body{margin:0;padding:0;font-family:system-ui}.card{display:flex;gap:1rem;padding:16px;border-radius:12px;background:#fff}.card:hover{box-shadow:0 4px 12px rgba(0,0,0,.1)}

Expande una hoja de estilo de una sola línea en reglas legibles e indentadas.

Media query

@media(max-width:640px){.nav{flex-direction:column}.nav a{padding:8px 0}}

Indenta las at-rules anidadas para que los breakpoints sean fáciles de revisar.

Propiedades personalizadas

:root{--primary:#6366f1;--gap:8px}.btn{color:var(--primary);margin:var(--gap)}

Formatea variables CSS y el uso de var() de forma limpia.

Keyframes

@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

Despliega los keyframes de animación línea por línea.

Casos de uso comunes

Limpiar CSS heredado: Embellece una hoja de estilo minificada o inconsistente para poder leerla y editarla.
Revisión de código: Formatea el CSS antes de un pull request para que los revisores vean estilos consistentes y comparables.
Enviar menos bytes: Minifica el CSS de producción para reducir el tamaño y acelerar la carga de páginas.
Aprender de ejemplos: Pega un fragmento copiado de un sitio y fomátealo para entender cómo está estructurado.

Detalles técnicos

Embellecido con js-beautify: Utiliza el mismo motor battle-tested detrás de los embellecedores online más populares para una salida predecible y configurable.
Minificado con CSSO: Comprime de forma segura — fusiona espacios en blanco y elimina comentarios sin cambiar cómo se renderizan los estilos.
Basado en el navegador: Se ejecuta completamente en el lado del cliente; ningún CSS sale de tu dispositivo ni llega a un servidor.

Buenas prácticas

Formatea el código fuente, minifica para producción: Mantén CSS legible en tu repositorio y minifica solo como paso de compilación o despliegue.
Elige un estilo de sangría: Acuerda usar 2 espacios, 4 espacios o tabulaciones en todo el equipo para obtener diffs limpios.
Minifica al final: Ejecuta la minificación después de todas las ediciones — el CSS minificado es difícil de mantener a mano.

Preguntas frecuentes

¿Cómo formateo CSS online?

Pega tu CSS en el campo de entrada y haz clic en Formatear. La herramienta reindenta la hoja de estilo con saltos de línea y espaciado consistentes, y luego te permite copiarla. Todo se ejecuta localmente en tu navegador — no se sube nada.

¿Cómo minificar CSS?

Pega tu CSS y haz clic en Minificar. La herramienta elimina los comentarios y colapsa los espacios en blanco para producir la hoja de estilo equivalente más pequeña, y muestra cuántos bytes ahorraste. El CSS minificado se renderiza exactamente igual que el original.

¿Cuál es la diferencia entre formatear y minificar CSS?

Formatear (embellecer) añade sangría y saltos de línea para hacer el CSS legible. Minificar hace lo contrario: elimina los comentarios y los espacios en blanco para reducir el tamaño del archivo y acelerar la carga. Ambos producen estilos que se renderizan de forma idéntica al original.

¿El formateo cambia cómo se ven mis estilos?

No. Formatear y minificar solo cambian los espacios en blanco y los comentarios — nunca los selectores, propiedades o valores. La página se renderiza exactamente igual antes y después.

¿Es seguro mi CSS con esta herramienta?

Sí. Todo el formateo y la minificación ocurren localmente en tu navegador mediante JavaScript — tu CSS nunca se envía a ningún servidor, ni se registra, ni se almacena. Esto lo hace seguro para estilos propietarios o no publicados, a diferencia de los formateadores del lado del servidor que reciben una copia de todo lo que pegas.

¿Puede formatear SCSS o Less?

Formatea y minifica CSS estándar. El SCSS/Less plano que también es CSS válido normalmente se formateará bien, pero la sintaxis exclusiva del preprocesador (anidamiento, mixins, variables con $ o @) es mejor manejarla con el propio formateador del preprocesador.

¿Qué sangría debo usar para CSS?

Dos espacios es el valor predeterminado más común y mantiene los diffs compactos; cuatro espacios puede mejorar la legibilidad de reglas profundamente anidadas; las tabulaciones permiten que cada desarrollador elija su ancho. Elige uno y aplícalo de forma consistente — esta herramienta admite los tres.

Herramientas relacionadas

Ver todas las herramientas →

Formateador, Embellecedor y Minificador HTML

Código

Formatea, embellece y minifica HTML al instante en tu navegador. Indenta el marcado desordenado o comprímelo para producción — gratis, privado, tu HTML nunca sale de tu dispositivo.

Formateador y Minificador JavaScript

Código

Formatea, embellece y minifica JavaScript al instante en tu navegador. Limpia código desordenado o comprímelo con Terser — gratis, privado, tu código nunca sale de tu dispositivo.

Formateador y Embellecedor SQL

Código

Formatea, embellece y minifica SQL al instante en tu navegador. Compatible con PostgreSQL, MySQL, SQL Server, BigQuery, Snowflake, Oracle y SQLite. Gratis y privado — tu SQL nunca sale de tu dispositivo.

Conversor de Bases — Binario, Hex, Decimal, Octal

Herramientas de Conversión

Convierte números entre binario, hexadecimal, decimal, octal y cualquier base personalizada (2-36) al instante. Gratis, privado, sin registro — todo el procesamiento ocurre en tu navegador.

Decodificador y Codificador Base64

Codificación y Formato

Decodifica y codifica Base64 online de forma gratuita. Conversión en tiempo real con soporte completo de UTF-8 y emojis. 100% privado — funciona en tu navegador. Sin registro.

Conversor de Base64 a Imagen

Codificación y Formato

Decodifica una cadena Base64 o data URI de vuelta a una imagen en tu navegador. Previsualiza, lee dimensiones y MIME, luego descarga como PNG, JPG, GIF, SVG. Sin subir.