Formateador de CSS

Formatea CSS con sangría consistente.

Cómo usar

Cuatro pasos: pega, ejecuta, revisa y copia. Todo ocurre en tu navegador.

Pega el contenido

Pega el contenido

Introduce CSS, HTML, JSON u otro texto. No se sube nada.

Ejecuta la herramienta

Ejecuta la herramienta

Pulsa Convertir o Ejecutar. El resultado aparece al instante.

Revisa la salida

Revisa la salida

Lee el código generado y las notas antes de usarlo.

Copia y usa

Copia y usa

Copia el resultado y pégalo en tu proyecto.

Sobre esta herramienta

Reescribe CSS comprimido o desordenado en reglas indentadas para que las revisiones y los diffs se lean bien. El formateo solo cambia espacios y estructura, nunca la cascada.

Ejemplo

El ejemplo parte de una tarjeta minificada a la que se le devuelve la indentación.

Entrada

.card{display:flex;padding:1.5rem;border-radius:.5rem;background:#fff}.card h2{font-size:1.25rem;font-weight:600;margin:0 0 .5rem}

Salida

.card {
  display: flex;
  padding: 1.5rem;
  border-radius: 0.5rem;
  background: #fff;
}

Consejo

Formatea antes de abrir la revisión y deja la minificación para el paquete de producción.