Formatador CSS
Formate e embeleze CSS com destaque de sintaxe
CSS de entrada
CSS formatado
Exemplos de formatação CSS
CSS minificado é difícil de ler; a formatação adiciona indentação e quebras de linha. Exemplo:
Estilos de contêiner e botão
Entrada minificada:
Saída formatada:
Clique em Exemplo acima para carregar CSS minificado no editor.
O que é um formatador CSS?
CSS (Cascading Style Sheets) estiliza cada site. CSS minificado ou mal formatado é difícil de ler e depurar. Um formatador CSS adiciona indentação e quebras de linha ao CSS bruto ou minificado para ver seletores, propriedades e aninhamento com clareza. As especificações W3C CSS definem a linguagem.
Esta ferramenta analisa seu CSS e o reformata com indentação consistente. É executada completamente no seu navegador. Nada é enviado a nenhum servidor, então é seguro para folhas de estilo de produção. Para minificar CSS, use o Minificador CSS. Para validação, o Validador CSS.
Como usar esta ferramenta
Colar ou enviar
Copie seu CSS e cole no editor à esquerda. Você também pode clicar em Enviar para carregar um arquivo .css. O botão Exemplo carrega dados de exemplo. CSS inválido mostrará um erro.
Verificar a saída
O painel direito é atualizado automaticamente. CSS válido é formatado com indentação correta. Use <strong>Minificar</strong> para remover espaços e obter uma versão compacta para produção.
Copiar ou baixar
Use Copiar para colocar o resultado na área de transferência ou Baixar para salvar. Para SCSS ou Less, compile primeiro com SCSS para CSS ou Less para CSS.
Como funciona o formatador
A ferramenta analisa seu CSS e o reformata com indentação consistente. Seletores, propriedades e regras são detectados; chaves e ponto e vírgula são preservados. As especificações W3C CSS definem a linguagem. A formatação adiciona quebras de linha e espaços para legibilidade sem alterar o comportamento. At-rules como @media, @keyframes e @import são tratadas. O processamento roda no seu navegador; nada é enviado a nenhum servidor.
Ferramentas de build como Vite, Webpack ou Parcel frequentemente geram CSS minificado. Colar essa saída aqui a torna legível. Para código fonte SCSS ou Less, compile primeiro com SCSS para CSS ou Less para CSS, depois formate.
Quando a formatação CSS ajuda
Muitos desenvolvedores precisam de um formatador ao inspecionar estilos de sites em produção, depurar CSS de terceiros ou revisar saídas minificadas de ferramentas de build. Colar CSS comprimido aqui torna seletores e regras visíveis imediatamente. A saída compilada de Bootstrap ou Tailwind costuma estar minificada; formatar revela a estrutura.
Formatar também ajuda antes de compartilhar estilos com a equipe ou revisar pull requests. Para prefixos de vendor, use o Prefixador CSS. Para converter em estilos inline (ex.: e-mail), CSS para inline. Para validar, o Validador CSS.
Perguntas frequentes
Meus dados são privados?
Sim. A formatação é executada completamente no seu navegador. Nenhum dado é enviado a nenhum servidor. Você pode verificar na aba Rede do navegador.
Suporta SCSS ou Less?
Esta ferramenta formata CSS puro. Para SCSS ou Less, compile primeiro com SCSS para CSS ou Less para CSS, depois formate a saída.
O que faz Minificar?
Remove espaços em branco, quebras de linha e comentários da saída formatada, gerando a versão mais pequena para produção. Também existe a página Minificador CSS.
Preserva os comentários?
A formatação preserva os comentários. Ao minificar, podem ser removidos dependendo do minificador. Verifique a saída antes de usar em produção.
E as propriedades personalizadas CSS?
Variáveis CSS (--var-name) são suportadas. O formatador trata sintaxe CSS moderna incluindo custom properties, @media e @keyframes.