Softonic

Formateador CSS

Paso 1 / 2
Formatear CSS

Abres una hoja de estilo de producción en DevTools y todo está en una sola línea. Este formateador descompone el CSS minificado en una forma legible: una declaración por línea, sangría de dos espacios y una línea en blanco entre reglas. Funciona con CSS en bruto, la salida de Sass o PostCSS y el CSS dentro de bloques <style> en línea. El CSS que pegues se envía a nuestro servidor para formatearlo y se incluye en el enlace de la página mientras avanzas entre los pasos de la herramienta. Los comentarios de bloque se eliminan al formatear.

Cómo formatear CSS

  1. 1

    Pega el CSS

    Minificado en una sola línea, parcialmente formateado o ya bonito. Al parser no le importa.

  2. 2

    Formatear

    Pulsa Formatear CSS. Cada declaración pasa a su propia línea con sangría de dos espacios, y una línea en blanco separa las reglas.

  3. 3

    Revisar

    Comprueba el resultado. Se conserva el orden de las propiedades, pero los comentarios de bloque se eliminan.

  4. 4

    Copiar

    Copia el CSS formateado al portapapeles y pégalo de nuevo en tu proyecto.

Antes y después

Entrada (minificada):

.btn{background:#2563eb;color:#fff;padding:.5rem 1rem;border-radius:6px}.btn:hover{background:#1d4ed8}

Salida (formateada):

.btn {
  background: #2563eb;
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 6px;
}

.btn:hover {
  background: #1d4ed8;
}

Qué hace el formateador

Comportamiento Valor
Declaraciones Una por línea, con sangría de dos espacios
Línea en blanco entre reglas 1
Llave de apertura En la misma línea que el selector
Llave de cierre En su propia línea
Orden de las propiedades Se conserva, nunca se reordena
Comentarios de bloque Se eliminan durante el formateo

Qué elimina el formateador

/* Este comentario desaparece al formatear */
.button { background: #2563eb; }

Los comentarios de bloque (/* ... */) se eliminan de la salida. Si los necesitas, guarda una copia del archivo original antes de formatear.

Reglas anidadas (Sass / anidación CSS moderna)

El formateador indenta las reglas anidadas según su profundidad:

.card {
  padding: 1rem;

  & .title {
    font-weight: 600;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
}

La sintaxis de Sass/Less (sin &) también es tolerada. Las reglas especiales de Sass como @mixin, @include y @extend se conservan intactas, pero no se reformatean en profundidad. Para formatear Sass por completo, usa una herramienta compatible con Sass como Prettier.

Cuándo no formatear

  • En producción: minifica, no formatees. El CSS formateado es 2-3 veces más grande que el minificado.
  • Antes de comparar: formatea ambos lados. Comparar un archivo minificado con uno bonito produce diferencias ilegibles.
  • Dentro de un pipeline de construcción: deja que Prettier o el formateador de tu framework maneje la consistencia. Usa esta herramienta para limpieza puntual.

Preguntas frecuentes

Maneja CSS estándar y anidación CSS (la especificación de 2023). La sintaxis específica de Sass como @mixin, @include, @extend y las variables con $ se conserva intacta, pero no se reformatea en profundidad. Para un formateo completo de Sass, usa una herramienta compatible con Sass como Prettier.

Sí. El formateo se ejecuta en nuestro servidor, por lo que el CSS que pegues se envía con cada petición de formateo y se incluye en el enlace de la página mientras avanzas entre los pasos de la herramienta. No se guarda en ninguna cuenta ni se reutiliza después.

No, si es sintácticamente válido. El espacio en blanco en CSS es insignificante fuera de los valores, y el formateador solo reorganiza el espacio en blanco y los saltos de línea. Se conservan el orden de las declaraciones y los propios valores.

Sí. Copia el CSS de dentro de las etiquetas <style>, pégalo, formatéalo y vuelve a pegarlo. El formateador solo trabaja con CSS, así que pega el contenido CSS y no el HTML que lo rodea.

El formateador retira los comentarios de bloque (/* ... */) para que la salida sea uniforme. Si quieres conservarlos, guarda una copia del CSS original antes de formatear.

Herramientas relacionadas

Referencia de la tabla ASCII

Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.

Referencia de caracteres HTML

Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Referencia de atajos de teclado

Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.

Formateador de JSON

Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.

Generador de Paletas de Color

Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.