# Formatador de CSS online (CSS, SCSS e Less)

> O formatador de CSS reescreve uma folha de estilos com uma declaração por linha, indentação consistente e espaços padronizados, e funciona também com SCSS e Less. Se houver erro de sintaxe, como uma chave sem fechar, a ferramenta mostra a linha e a coluna. Tudo roda no seu navegador, sem enviar o código a nenhum servidor.

- Endereço oficial: https://pradev.com.br/formatador-css
- Categoria: JSON, dados e formatadores
- Tipo: Formatador
- Atualizado em: 2026-09-30
- Autor: Leonardo Gaertner (https://pradev.com.br/sobre)
- Preço: grátis, sem cadastro. O processamento acontece no navegador de quem usa.

## Como usar

1. Cole o CSS no campo da esquerda, ou clique em Abrir arquivo.
2. Escolha a linguagem (CSS, SCSS ou Less) e a indentação.
3. Clique em Copiar resultado ou em Baixar arquivo.

## Como funciona

A formatação usa o Prettier. Cada declaração vai para uma linha, com um espaço depois dos dois-pontos e ponto e vírgula no final, e cada regra ganha suas chaves e indentação. Seletores e consultas de mídia recebem espaços padronizados, como em .a > .b e (max-width: 600px).

Propriedades com listas separadas por vírgula, como font e transition com vários valores, são quebradas em uma linha por valor quando isso melhora a leitura. Comentários são mantidos.

A ferramenta muda a formatação, e não o significado: propriedades, valores e a ordem das regras continuam os mesmos. Ela não minifica o CSS. Para SCSS e Less, escolha a linguagem certa, senão variáveis e aninhamento de regras podem ser recusados como erro.

### Exemplo

```text
Entrada: .card{color:red;margin:0 auto}
Saída:
.card {
  color: red;
  margin: 0 auto;
}
```

## Perguntas frequentes

### Formatar o CSS muda o estilo da página?

Não. Só a aparência do código muda, com espaços, quebras de linha e o estilo das aspas. As propriedades, os valores e a ordem das regras continuam iguais.

### A ferramenta minifica CSS?

Não. Ela deixa o CSS legível. Para reduzir o tamanho em produção, use o minificador do seu empacotador ou um minificador específico.

### Por que aparece "CSS inválido"?

Porque há um erro de sintaxe, como uma chave { sem a } correspondente, um texto entre aspas aberto ou uma declaração incompleta. A mensagem indica a linha e a coluna. Se o código for SCSS ou Less, escolha a linguagem na lista.

### Funciona com SCSS e Less?

Sim. Escolha SCSS ou Less em Linguagem, e variáveis, aninhamento de regras e mixins são reconhecidos e formatados.

## Fontes

- [Prettier: opções de formatação](https://prettier.io/docs/options)
- [MDN: CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS)

## Ferramentas relacionadas

- [Formatador HTML](https://pradev.com.br/formatador-html): Formate HTML online com indentação de 2 ou 4 espaços, largura de linha e o CSS do style organizado. Grátis, no navegador.
- [Formatador JSON](https://pradev.com.br/formatador-json): Formate, indente, minifique e valide JSON online. Mostra a linha e a coluna do erro. Grátis, e o que você cola não sai do navegador.
- [Formatador XML](https://pradev.com.br/formatador-xml): Formate e minifique XML online, com indentação de 2 ou 4 espaços e aviso de erro com linha e coluna. Grátis, no navegador.
- [Conversor de Timestamp Unix](https://pradev.com.br/timestamp-converter): Converta timestamp Unix (segundos ou milissegundos) em data e hora, e data em timestamp. Grátis, com o seu fuso horário e em UTC.
- [Testador de Regex](https://pradev.com.br/regex-tester): Teste expressões regulares online: destaque dos casamentos, grupos e flags. Usa o motor do JavaScript. Grátis, direto no navegador.
- [Comparador JSON](https://pradev.com.br/comparador-json): Compare dois JSON online e veja o caminho de cada chave adicionada, removida ou alterada. A ordem das chaves não conta. Grátis.