Softonic

Formatador de CSS

Etapa 1 / 2
Formatar CSS

Você abre uma folha de estilo de produção no DevTools e tudo está em uma linha. Este formatador desempacota CSS minificado em uma forma legível: uma declaração por linha, indentação de dois espaços e uma linha em branco entre as regras. Funciona com CSS bruto, a saída de Sass ou PostCSS e o CSS dentro de blocos <style> inline. O CSS que você cola é enviado ao nosso servidor para ser formatado e fica presente no link da página enquanto você avança entre as etapas da ferramenta. Comentários de bloco são removidos durante a formatação.

Como formatar CSS

  1. 1

    Cole o CSS

    Minificado em uma linha, parcialmente formatado ou já formatado. O analisador não se importa.

  2. 2

    Formatar

    Clique em Formatar CSS. Cada declaração passa para a própria linha com indentação de dois espaços, e uma linha em branco separa as regras.

  3. 3

    Revisar

    Confira o resultado. A ordem das propriedades é preservada, mas os comentários de bloco são removidos.

  4. 4

    Copiar

    Copie o CSS formatado para a área de transferência e cole-o de volta no seu projeto.

Antes e depois

Entrada (minificada):

.btn{background:#2563eb;color:#fff;padding:.5rem 1rem;border-radius:6px}.btn:hover{background:#1d4ed8}

Saída (formatada):

.btn {
  background: #2563eb;
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 6px;
}

.btn:hover {
  background: #1d4ed8;
}

O que o formatador faz

Comportamento Valor
Declarações Uma por linha, com indentação de dois espaços
Linha em branco entre regras 1
Chave de abertura Na mesma linha do seletor
Chave de fechamento Na própria linha
Ordem das propriedades Preservada, nunca reordenada
Comentários de bloco Removidos durante a formatação

O que o formatador remove

/* Este comentário desaparece ao formatar */
.button { background: #2563eb; }

Comentários de bloco (/* ... */) são removidos da saída. Se precisar deles, guarde uma cópia do arquivo original antes de formatar.

Regras aninhadas (Sass / aninhamento CSS moderno)

O formatador indenta as regras aninhadas conforme a profundidade delas:

.card {
  padding: 1rem;

  & .title {
    font-weight: 600;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
}

A sintaxe Sass/Less (sem &) também é tolerada. As at-rules específicas do Sass, como @mixin, @include e @extend, são passadas intactas, mas não são reformatadas em profundidade. Para formatação completa de Sass, use uma ferramenta compatível com Sass, como o Prettier.

Quando não formatar

  • Em produção: minifique, não formate. CSS formatado é 2 a 3 vezes maior que o minificado.
  • Antes de comparar: formate os dois lados. Comparar um arquivo minificado com um já formatado produz diferenças ilegíveis.
  • Dentro de um pipeline de construção: deixe o Prettier ou o formatador do seu framework cuidar da consistência. Use esta ferramenta para limpeza pontual.

Perguntas frequentes

Ele lida com CSS padrão e Aninhamento CSS (a especificação de 2023). A sintaxe específica do Sass, como @mixin, @include, @extend e variáveis com $, é passada intacta, mas não é reformatada em profundidade. Para formatação completa de Sass, use uma ferramenta compatível com Sass, como o Prettier.

Sim. A formatação é executada no nosso servidor, então o CSS que você cola é enviado a cada pedido de formatação e fica presente no link da página enquanto você avança entre as etapas da ferramenta. Ele não é salvo em nenhuma conta nem reutilizado depois.

Não, se ele for sintaticamente válido. Espaços em branco em CSS são insignificantes fora dos valores, e o formatador apenas rearranja espaços e quebras de linha. A ordem das declarações e os próprios valores são preservados.

Sim. Copie o CSS que está dentro das tags <style>, cole, formate e cole de volta. O formatador trabalha apenas com CSS, então cole o conteúdo CSS e não o HTML ao redor.

O formatador remove os comentários de bloco (/* ... */) para manter a saída uniforme. Se quiser mantê-los, salve uma cópia do CSS original antes de formatar.

Ferramentas relacionadas

Referência da Tabela ASCII

Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.

Referência de Caracteres HTML

Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.

Referência de atalhos de teclado

Pesquise atalhos padrão documentados do VS Code, Chrome e Bash com GNU Readline no macOS, Windows e Linux.

Gerador de Papel de Parede em Gradiente

Gere papéis de parede em gradiente borrados de três cores para laptop, telefone ou fundos do Zoom. Randomize ou defina o ângulo e o desfoque manualmente.

Gerador de Cores Análogas

Crie uma paleta análoga de cinco cores a partir de qualquer cor base, com o trio clássico, dois tons externos e valores hex, RGB e HSL.

Conversor de ASCII para Hex

Converta texto ASCII em valores de byte hexadecimal. A saída usa dois dígitos hexadecimais por caractere, prontos para dumps de memória, rastreamentos de pacotes ou tabelas de firmware.

Ferramenta disponível em outros idiomas