🎨Formatador e minificador de CSS
Cole um CSS para formatá-lo com uma declaração por linha e indentação consistente, ou minifique removendo comentários e espaços desnecessários para reduzir o tamanho.
Funciona bem com CSS padrão. Construções muito incomuns (@media profundamente aninhado com seletores complexos) podem sair com formatação imperfeita — não é um parser CSS completo.
🔒 Cálculo 100% local — os dados que você digita não saem do seu navegador, nada é enviado a servidores.
Fonte: Formatador CSS por divisão de texto (sem AST completa) — processamento local por expressões regulares e percurso de caracteres, respeitando strings e url() · Última verificação em 23/09/2026
Formatar CSS quebra o texto em cada chave e ponto e vírgula, coloca uma declaração por linha e indenta um nível dentro de cada bloco, com uma linha em branco entre regras. Minificar faz o oposto: remove comentários, colapsa espaços, elimina espaços ao redor de { } : ; , e tira o último ponto e vírgula antes de cada chave de fechamento, reduzindo o tamanho sem mudar o estilo aplicado.
Como usar o formatador
- Escolha formatar ou minificarFormatar deixa o CSS legível; Minificar deixa o menor tamanho possível.
- Cole o CSSUma regra, um arquivo inteiro ou um trecho copiado do inspetor do navegador.
- Copie o resultadoO resultado atualiza a cada alteração, pronto para colar no seu projeto.
Como funciona
No modo minificar, a ferramenta remove comentários (`/* ... */`), colapsa qualquer sequência de espaço em branco em um único espaço, remove os espaços ao redor de `{`, `}`, `:`, `;` e `,`, e elimina o ponto e vírgula que sobra antes de cada `}` — que é opcional em CSS, já que a última declaração de um bloco não precisa dele.
No modo formatar, o texto é percorrido caractere a caractere, quebrando linha em cada `{`, `}` e `;`. O que fica dentro de um par de chaves recebe um nível a mais de indentação (2 espaços), cada declaração ocupa sua própria linha, e uma linha em branco separa os blocos de nível superior. Strings entre aspas e `url(...)` são preservadas, para que um `;` ou `{` dentro delas não seja tratado como estrutura.
Exemplo resolvido
Entrada: `.btn{color:#fff;background:#24853F}.btn:hover{background:#1a6b30}`. No modo formatar, sai `.btn {`, depois ` color: #fff;`, ` background: #24853F;` e `}`, uma linha em branco, e o bloco do `:hover` da mesma forma.
No modo minificar, um CSS já formatado com comentários e quebras de linha volta a ser uma linha só: `.btn{color:#fff;background:#24853F}.btn:hover{background:#1a6b30}`. Observe que o último `;` de cada bloco desapareceu, o que é seguro e economiza um byte por regra — em folhas de estilo grandes, com centenas de regras, isso soma.
Suposições e limitações
- Não é um parser CSS completo: funciona bem com CSS padrão, mas construções muito incomuns podem sair com formatação imperfeita
- Regras aninhadas, como @media com várias regras dentro, recebem indentação por nível de chaves, mas seletores muito complexos podem não ficar no formato ideal
- Não valida o CSS: uma propriedade inexistente ou um valor inválido passa sem aviso, já que a ferramenta apenas reformata o texto
- Espaço dentro de calc() e valores com operadores é preservado em torno de + e -, que exigem espaço para serem válidos
- O CSS colado é processado 100% no navegador e não é enviado a nenhum servidor
Dicas para tirar o melhor proveito
Use o modo formatar para ler CSS minificado copiado de um site ou de uma biblioteca, tornando cada regra visível em sua própria linha antes de estudar ou adaptar. Use o modo minificar antes de embutir um trecho de CSS crítico em uma tag