Saltar para o conteúdo principal
LibraTool logoLibraTool

Embelezador de CSS grátis

Formate CSS minificado com indentação consistente ou minifique-o. Ordenação alfabética opcional das propriedades para diffs previsíveis.

Funciona offline depois de carregado

Solte um arquivo aqui ou clique para procurar

CSS · processado no seu dispositivo

ou pressione Ctrl+V para colar da área de transferência

Procurar arquivos
CSS formatado
A saída aparecerá aqui…

Usos comuns

  • Depurar CSS de ProduçãoVisualize CSS minificado de sites de produção em formato legível para encontrar e fazer engenharia reversa de estilos.
  • Impor Estilo CSS da EquipeExecute CSS enviado pela equipe através de um embelezador consistente para que diffs sejam sobre conteúdo, não formatação.
  • Formatar CSS com Prefixo de FornecedorCSS com prefixo de fornecedor (saída de autoprefixer) geralmente tem muitas variantes -webkit-, -moz-, -ms-. Formate para inspecionar.
  • Aprenda CSS ProfissionalEstude CSS de sistemas de design famosos formatando sua saída compilada.
  • Formatar CSS para Relatórios de BugsAo arquivar bugs CSS, CSS formatado é muito mais fácil para os revisores lerem e entenderem.

Como funciona

Esta ferramenta formata CSS usando um analisador recursivo escrito à mão construído diretamente na página — sem biblioteca de terceiros, sem chamada a servidor. O analisador percorre o seu CSS caracter por caracter, tratando corretamente strings entre aspas, valores url(), regras aninhadas at-rules, e comentários que confundiriam abordagens mais simples baseadas em regex.

  1. 1
    Tokenização ao nível de caracteres
    A função walkCss analisa a entrada bruta um caracter de cada vez, acompanhando o estado de aspas e a profundidade de parênteses para que ponto e vírgula ou chavetas dentro de url(), valores de string, ou comentários nunca sejam confundidos com delimitadores estruturais.
  2. 2
    Separação de blocos e declarações
    Quando o analisador encontra uma chaveta de abertura de nível superior, extrai o prelúdio (o seletor ou palavra-chave at-rule) e processa recursivamente o corpo do bloco — que pode conter regras aninhadas (@media, @supports, aninhamento nativo de CSS) tratadas numa profundidade de recursão mais funda.
  3. 3
    Ordenação de propriedades e indentação
    As declarações dentro de cada bloco são recolhidas numa sequência, depois opcionalmente ordenadas alfabeticamente por nome de propriedade antes de serem escritas com a largura de indentação escolhida (2 ou 4 espaços). O modo minify salta o espaço em branco inteiramente e remove comentários.
  4. 4
    Saída instantânea no navegador
    Os resultados aparecem enquanto você digita via um hook useMemo — nada é enviado para qualquer lugar. O CSS formatado ou minificado pode ser copiado para a área de transferência ou baixado como um arquivo .css, e o painel mostra a diferença de tamanho comparada com o original.

Ferramentas relacionadas

🌐

Embelezador e Minificador de HTML

Formate ou minifique HTML com indentação de aninhamento adequada. Preserva o conteúdo dentro de blocos <pre>, <script> e <style>.

Experimentar
🗄️

Formatador e Embelezador de SQL

Formate consultas SQL com indentação adequada, capitalização de palavras-chave configurável e quebras de linha nas principais cláusulas. Funciona com qualquer dialeto SQL.

Experimentar
🗜️

CSS Minificador e embelezador

Minimize CSS para reduzir o tamanho do arquivo ou embeleze CSS minificado para facilitar a leitura. Instantâneo, no seu navegador.

Experimentar

Perguntas frequentes