Minificador de CSS

Cole uma folha de estilos para remover espaços e comentários, encurtar valores como #ff0000 → red e mesclar regras duplicadas com as otimizações estruturais do CSSO.

Roda no seu navegadorSem cadastroNada é enviado

Saída minificada

Como usar: Minificador de CSS

  1. Cole o CSS ou abra um arquivo .css.
  2. Mantenha Reestruturar ativado para mesclar regras e declarações, ou desative para uma passada segura que só remove espaços.
  3. Deixe Manter comentários de licença ativado para preservar avisos /*! … */.
  4. Compare os tamanhos original, minificado e com gzip.
  5. Copie o resultado ou baixe output.min.css.

Como funciona a minificação de CSS

Esta ferramenta usa o CSSO (CSS Optimizer), que analisa sua folha de estilos em uma árvore sintática e a imprime de volta na forma equivalente mais curta. Além de remover espaços e comentários, ele aplica reescritas seguras de valores:

  • #ffffff → #fff, #ff0000 → red
  • 0px → 0, 0.90 → .9
  • margin: 8px 16px 8px 16px → margin:8px 16px
  • Regras vazias e declarações duplicadas são removidas

O que “reestruturar” faz?

A reestruturação analisa a folha de estilos inteira: regras com declarações idênticas são mescladas em uma única lista de seletores (.a,.b{color:red}), e seletores repetidos são combinados. Isso costuma economizar mais 5–15% em folhas de estilo reais. O CSSO só mescla quando a ordem da cascata continua a mesma, mas, se você depende de sobrescritas incomuns, pode desativar a opção para uma minificação puramente sintática.

Por que minificar CSS?

O CSS bloqueia a renderização: o navegador não consegue desenhar a página até que as folhas de estilo no <head> sejam baixadas e processadas. CSS menor significa um First Contentful Paint mais rápido e Core Web Vitals melhores, o que ajuda tanto os usuários quanto o posicionamento nas buscas. Combine a minificação com gzip ou Brotli no servidor para o melhor resultado.

Perguntas frequentes

É seguro minificar CSS?
Sim. Espaços e comentários não afetam a renderização do CSS, e as reescritas de valores do CSSO são equivalentes pela especificação. A reestruturação mantém a ordem da cascata; desative-a se quiser a saída mais conservadora.
Suporta CSS moderno, como custom properties, nesting e @layer?
Sim. Custom properties (--var), @media, @supports, @layer, @container e a sintaxe de grid são preservados.
Posso desminificar o CSS depois?
CSS minificado pode ser reindentado por qualquer formatador, mas os comentários removidos não podem ser recuperados. Guarde o arquivo-fonte original e trate o arquivo minificado como saída de build.
Minha folha de estilos é enviada para algum lugar?
Não. A minificação roda no seu navegador; nada é enviado a um servidor.

Ferramentas relacionadas

Minificador de JavaScript Comprima e encurte nomes em JS com Terser, com estatísticas de tamanho e gzip. Minificador de HTML Remova comentários e espaços, e minifique CSS/JS inline. Formatador SQL Formate ou minifique SQL para PostgreSQL, MySQL, T-SQL, BigQuery e mais. Formatador JSON Formate, minifique e valide JSON com erros por linha/coluna.