Formatador e Embelezador CSS

Cole CSS bruto ou minificado e embeleze com indentação adequada, ou minifique para produção. Funciona com qualquer folha de estilos, independentemente do tamanho.

Entrada

Saída

Funcionalidades

Alternar entre embelezar e minificar

Ordenar propriedades

Remover duplicados

Como Usar

1. Cole seu CSS na caixa de entrada à esquerda.

2. Clique em Formatar para embelezar ou Minificar para comprimir.

3. Copie o resultado formatado do painel à direita.

Sobre esta ferramenta

CSS minificado ou editado à mão é difícil de revisar: uma única linha longa esconde regras duplicadas, pontos e vírgulas faltando e sobrescritas. Este formatador reconstrói a folha de estilos com uma declaração por linha e indentação consistente de dois espaços, quatro espaços ou tabulações, mantendo intactos strings, comentários e blocos aninhados como @media e @supports. Minificar faz o contrário para produção, removendo comentários e espaços desnecessários para reduzir o tamanho de transferência. Você pode colar o código ou arrastar um arquivo .css e depois copiar ou baixar o resultado. Formatar muda só a apresentação — a ordem e o significado das regras continuam exatamente iguais, então a cascata se comporta como antes.

Perguntas Frequentes

Formatar vai mudar o comportamento do meu CSS?

Não. O formatador só muda espaços e quebras de linha. Seletores, declarações e a ordem entre eles são preservados, então especificidade e cascata funcionam exatamente como antes.

Quanto a minificação de CSS economiza?

Remover comentários e espaços costuma reduzir uma folha de estilos escrita à mão em 15–30%. Servi-la com compressão gzip ou Brotli economiza muito mais, então use as duas coisas em produção.

Ele suporta @media, @supports e regras aninhadas?

Sim. At-rules e blocos aninhados são indentados por nível, e o conteúdo deles é formatado como qualquer outra regra, então as media queries continuam fáceis de ler.

Os comentários são mantidos?

Ao formatar, os comentários de bloco são mantidos e colocados em linhas próprias. Ao minificar, eles são removidos, já que o navegador não precisa deles.

O formatador verifica erros no meu CSS?

Ele não valida nomes nem valores de propriedades. Formata o que recebe, então um erro de digitação como colr: red continua no resultado; use seu editor ou um linter como o Stylelint para encontrar erros.