Processamento local

FERRAMENTAS PARA DESENVOLVEDORES

Formatar CSS

Cole uma folha de estilos comprimida e receba de volta com uma regra por linha e indentação consistente.

Usar ferramenta

CODE EDITOR

CSS Formatter

Local processing · professional engine · your code is never sent

CSS · ready to process
CSSinput.css
0 linesCSS
CSSformatted.cssPreview
0 linesRead onlyCSS

O cenário típico

Você precisa entender por que um elemento aparece errado em produção e tudo o que tem é um CSS servido numa única linha de trinta mil caracteres. Reindentar transforma isso em algo que dá para ler, buscar e comparar.

Muda só o formato, nunca a cascata

A ordem das regras é preservada exatamente, e em CSS é isso que importa: especificidade e ordem de aparição decidem quem vence. A ferramenta não reordena nem agrupa seletores, só muda onde caem espaços e quebras.

Um passo útil antes de comparar

Se vai confrontar duas versões de uma folha de estilos, formate as duas antes. CSS minificado contra CSS indentado gera um diff completamente inútil mesmo com conteúdo quase idêntico.

PERGUNTAS FREQUENTES

Minha folha de estilos é enviada para um servidor?

Não. É processada no seu navegador, então dá para formatar CSS de projeto privado sem que saia da sua máquina.

Muda como a página aparece?

Não. Só mudam espaços, indentação e quebras; cascata e especificidade continuam iguais.

Aceita SCSS ou LESS?

É voltado para CSS padrão. Com sintaxe de pré-processador a saída pode sair errada.

Agrupa ou reordena seletores?

Não, e é de propósito: reordenar regras em CSS pode mudar o resultado visual.