Formateador CSS
Formatear y embellecer CSS con resaltado de sintaxis
CSS de entrada
CSS formateado
Ejemplos de formateo CSS
El CSS minificado es difícil de leer; formatearlo añade indentación y saltos de línea. Ejemplo:
Estilos de contenedor y botón
Entrada minificada:
Salida formateada:
Haz clic en Ejemplo de arriba para cargar CSS minificado en el editor.
¿Qué es un formateador CSS?
CSS (Cascading Style Sheets) estiliza cada sitio web. El CSS minificado o mal formateado es difícil de leer y depurar. Un formateador CSS añade indentación y saltos de línea al CSS crudo o minificado para ver selectores, propiedades y anidación con claridad. Las especificaciones W3C CSS definen el lenguaje.
Esta herramienta analiza tu CSS y lo reformatea con indentación consistente. Se ejecuta completamente en tu navegador. No se envía nada a ningún servidor, así que es seguro para hojas de estilo de producción. Para minificar CSS, usa el Minificador CSS. Para validar, el Validador CSS.
Cómo usar esta herramienta
Pegar o subir
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.
Revisar la salida
El panel derecho se actualiza automáticamente. El CSS válido se formatea con la indentación correcta. Usa <strong>Minificar</strong> para eliminar espacios y obtener una versión compacta para producción.
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.
Cómo funciona el formateador
La herramienta analiza tu CSS y lo reformatea con indentación consistente. Se detectan selectores, propiedades y reglas; se preservan llaves y punto y coma. Las especificaciones W3C CSS definen el lenguaje. El formateo añade saltos de línea y espacios para legibilidad sin cambiar el comportamiento. Se manejan at-rules como @media, @keyframes e @import. El procesamiento corre en tu navegador; no se envía nada a ningún servidor.
Herramientas de build como Vite, Webpack o Parcel suelen generar CSS minificado. Pegar esa salida aquí lo hace legible. Para código fuente SCSS o Less, compila primero con SCSS a CSS o Less a CSS, luego formatea.
Cuándo ayuda el formateo CSS
Muchos desarrolladores necesitan un formateador al inspeccionar estilos de sitios en producción, depurar CSS de terceros o revisar salidas minificadas de herramientas de build. Pegar CSS comprimido aquí hace visibles selectores y reglas de inmediato. La salida compilada de Bootstrap o Tailwind suele estar minificada; formatear revela la estructura.
Formatear también ayuda antes de compartir estilos con el equipo o revisar pull requests. Para prefijos de vendor, usa el Prefijador CSS. Para convertir a estilos inline (p. ej. email), CSS a inline. Para validar, el Validador CSS.
Preguntas frecuentes
¿Mis datos son privados?
Sí. El formateo se ejecuta completamente en tu navegador. No se envía ningún dato a ningún servidor. Puedes comprobarlo en la pestaña Red del navegador.
¿Soporta SCSS o Less?
Esta herramienta formatea CSS plano. Para SCSS o Less, compila primero con SCSS a CSS o Less a CSS, luego formatea la salida.
¿Qué hace Minificar?
Elimina espacios en blanco, saltos de línea y comentarios de la salida formateada, dando la versión más pequeña para producción. También existe la página Minificador CSS.
¿Preserva los comentarios?
El formateo preserva los comentarios. Al minificar pueden eliminarse según el minificador. Revisa la salida antes de usar en producción.
¿Y las propiedades personalizadas CSS?
Las variables CSS (--var-name) están soportadas. El formateador maneja sintaxis CSS moderna incluyendo custom properties, @media y @keyframes.