UTILS.
100% en el navegador
{ }

Embellecedor de CSS

Formatea y aplica sangría a CSS minificado con saltos de línea y espaciado adecuados.

— la salida aparece aquí —

Acerca de esta herramienta

El Embellecedor de CSS es un formateador gratuito que se ejecuta en el navegador y convierte CSS minificado o desordenado en un diseño limpio y con sangría uniforme. Primero colapsa los espacios en blanco existentes y luego reconstruye la estructura desde cero: cada regla y declaración va en su propia línea, la llave de apertura permanece en la línea del selector, la llave de cierre baja a su propia línea y los bloques anidados se sangran dos espacios por nivel.

Trabaja únicamente sobre la puntuación que separa selectores, bloques y declaraciones, añadiendo un solo espacio después de los dos puntos de cada declaración y un espacio antes de la llave de apertura. Los nombres y valores de las propiedades se dejan intactos, así que solo cambia el espaciado y el estilo no se ve afectado. El formateo se ejecuta en vivo a medida que escribes, por completo en tu navegador: sin subidas, sin cuentas, sin rastreo, y funciona sin conexión.

Resulta útil cuando necesitas leer, comparar o editar a mano una hoja de estilos comprimida extraída de una compilación, o para expandir un fragmento de una sola línea en algo legible. Pega el CSS, revisa el resultado ordenado en el cuadro de salida y cópialo con un clic.

Preguntas frecuentes

¿Cambia mis estilos?
No. Solo ajusta los espacios en blanco y la sangría; los nombres de propiedades, los valores y los selectores permanecen exactamente como estaban escritos, por lo que el resultado renderizado es idéntico.
¿Se envía mi CSS a algún sitio?
No. El formateo se ejecuta localmente en JavaScript, sin subidas, sin cuentas y sin rastreo, por lo que también funciona sin conexión.
¿Puede expandir CSS minificado?
Sí. Primero colapsa todos los espacios en blanco existentes y luego vuelve a aplicar la sangría desde cero, así que tanto el CSS minificado de una sola línea como el CSS extenso de varias líneas producen la misma salida ordenada.
¿Valida o corrige mi CSS?
No. Reorganiza el espaciado alrededor de las llaves, los puntos y comas y los dos puntos, pero no analiza (lint) ni corrige el CSS, por lo que cualquier error de sintaxis existente se conserva sin cambios.

Más herramientas