CSS de entrada

CSS minificado

Exemplos de minificação CSS

O CSS formatado é legível; o CSS minificado é compacto para produção. Exemplo:

Estilos de contêiner e botão

Entrada formatada:

Entrada

Saída minificada:

Saída

Use Exemplo acima para carregar mais dados de exemplo.

O que é um minificador CSS?

Os arquivos CSS usam espaços em branco, comentários e indentação para legibilidade. Em produção, arquivos menores carregam mais rápido. Um minificador CSS remove espaços desnecessários, comentários e encurta valores onde é seguro para reduzir o tamanho do arquivo. As especificações W3C CSS definem a linguagem; a minificação preserva o comportamento reduzindo bytes.

Esta ferramenta analisa seu CSS e gera uma versão compacta. A minificação é executada completamente no seu navegador. Nada é enviado a nenhum servidor. Para formatar CSS minificado, use o Formatador CSS. Para validar, o Validador CSS.

Como usar esta ferramenta

Colar ou enviar CSS

Copie seu CSS e cole no editor à esquerda. 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.

Ver a saída minificada

O painel direito mostra o CSS compacto. Espaços em branco e comentários são removidos. A saída é CSS válido—o comportamento é preservado. CSS inválido mostrará um erro na saída.

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, depois minifique.

Como funciona o minificador

A ferramenta remove espaços em branco, quebras de linha e comentários do seu CSS. Os valores podem ser encurtados onde for seguro (ex.: 0px para 0, #ffffff para #fff). A saída permanece válida conforme a especificação W3C CSS. Ferramentas de build como cssnano ou PostCSS oferecem otimização mais agressiva; esta ferramenta fornece minificação rápida no navegador.

Quando a minificação CSS ajuda

Sites de produção se beneficiam de arquivos CSS menores. A minificação reduz o tamanho do payload, melhora os tempos de carregamento e economiza largura de banda. Ferramentas de build como Webpack, Vite ou Parcel costumam minificar automaticamente, mas esta ferramenta é útil para arquivos pontuais, verificações rápidas ou quando não há etapa de build.

Modelos de e-mail, estilos embutidos ou CSS hospedado em CDN frequentemente precisam de minificação manual. Passar sua folha de estilos por aqui fornece saída pronta para produção. Para adicionar prefixos de vendor antes de minificar, use o Prefixador CSS. Para formatar CSS minificado de volta a forma legível, use o Formatador CSS.

Perguntas frequentes

A minificação quebra o CSS?

Não. Apenas espaços em branco e comentários são removidos. Seletores, propriedades e valores permanecem iguais. A saída é CSS válido. Alguns minificadores podem encurtar valores (ex.: 0px para 0)—o comportamento é preservado.

Meus dados são privados?

Sim. A minificação é executada completamente no seu navegador. Nenhum dado é enviado a nenhum servidor.

E os source maps?

Esta ferramenta não gera source maps. Para builds de produção com source maps, use uma ferramenta de build como PostCSS, cssnano ou o minificador do seu bundler.

Suporta SCSS ou Less?

Esta ferramenta minifica CSS puro. Para SCSS ou Less, compile primeiro com SCSS para CSS ou Less para CSS, depois minifique a saída.

Quanto menor fica?

Tipicamente 20–40% menor dependendo de espaços em branco e comentários. CSS muito comentado ou formatado pode ter economia maior. A redução exata depende da sua entrada.

Ferramentas relacionadas

Para a especificação CSS: W3C CSS. MDN CSS é a referência. cssnano e PostCSS oferecem minificação avançada em tempo de build.

Minificador CSS