Como usar
- Cole seu CSS no editor de entrada.
- Em Indentação, escolha 2 espaços, 4 espaços ou Tab.
- Em Chaves, escolha Na mesma linha ou Na linha seguinte.
- Acima de 100 KB, o CSS não é formatado automaticamente enquanto você digita: clique em Formatar CSS ou pressione Ctrl+Enter (Cmd+Enter no Mac).
Exemplos
Organizar o CSS minificado de uma loja
Entrada
.produto{color:#222;margin:0;padding:16px}.preco{font-size:24px;font-weight:700}Saída
.produto {
color: #222;
margin: 0;
padding: 16px;
}
.preco {
font-size: 24px;
font-weight: 700;
}Indentar regras para telas maiores
Entrada
@media (min-width:768px){.vitrine{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.botao{background:#006633;&:hover{background:#004d26}}}Saída
@media (min-width:768px)
{
.vitrine
{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.botao
{
background: #006633;
&:hover
{
background: #004d26;
}
}
}Ordenar propriedades e remover comentários comuns
Entrada
/*! Tema da loja — licença MIT */
/* Cartão de produto */
.cartao{padding:16px;--cor-destaque:#006633;color:var(--cor-destaque);border-radius:8px;display:block}Saída
/*! Tema da loja — licença MIT */
.cartao {
--cor-destaque: #006633;
border-radius: 8px;
color: var(--cor-destaque);
display: block;
padding: 16px;
}Dicas
- Para SCSS ou LESS, use o Formatador de código.
- Precisa do menor arquivo possível? Minifique o CSS.
- Compare o antes e o depois no Comparador de textos.
Perguntas frequentes
Meu CSS é enviado para algum servidor?
O CSS é processado no seu navegador, sem ser enviado ao servidor pela ferramenta. O código não é salvo; apenas suas opções ficam armazenadas no navegador.
Por que algumas propriedades não ficam em ordem alfabética?
A opção A–Z de Ordenar propriedades mantém a ordem original quando a mudança alteraria qual declaração prevalece, como em margin e margin-top. Nesse caso, a ferramenta mostra um aviso.
Como encontrar um erro de sintaxe no CSS?
Quando encontra um erro de sintaxe, a ferramenta informa a linha e a coluna e destaca a linha no editor de entrada. Corrija o trecho indicado; o resultado fica vazio enquanto houver erro.
Posso formatar SCSS ou LESS?
Esta ferramenta é destinada a CSS. Para SCSS ou LESS, use o Formatador de código.
Quais arquivos posso usar?
São aceitos arquivos .css e .txt de até 10 MB. Divida arquivos maiores e formate as partes.