Embelezador de CSS

Reformate CSS minificado ou desarrumado em regras limpas e bem indentadas — ou minifique de novo.

A ferramenta interativa precisa de JavaScript para funcionar. Todo o resto desta página — como funciona, um exemplo resolvido e as respostas às perguntas habituais — está mais abaixo e não precisa de nada.

Ferramentas relacionadas

Todas as ferramentas: JSON, XML e formatos →

Embelezador de HTMLTransforme HTML minificado ou emaranhado em marcação legível e bem indentada — ou minifique-o.Minificador / embelezador de JavaScriptMinifique ou embeleze JavaScript no seu navegador, com um tokenizer que respeita strings, regex e comentários.Minificador CSSReduza CSS removendo comentários e espaços desnecessários.Gerador de sombra CSS (box-shadow)Ajuste uma sombra CSS com pré-visualização ao vivo e copie o código gerado — deslocamento, desfoque, extensão, cor, inset.Compressor de CSSMinifique CSS removendo comentários e espaços para reduzir o tamanho da folha de estilos.Laboratório de CSS FlexboxExperimente flex-direction, wrap, justify-content, align-items e gap — pré-visualização ao vivo e CSS para copiar.Gerador de CSS GridConstrua um layout CSS Grid visualmente — colunas, linhas, espaços e alinhamento — com pré-visualização ao vivo e CSS para copiar.Formatador de datas ISO 8601Transforme qualquer data, hora e desvio UTC em ISO 8601, RFC 3339, data de semana/ordinal, RFC 2822, data HTTP e timestamps Unix.

Embelezador de CSS funciona diretamente nesta página — gratuito, instantâneo e sem instalar nada. Encontra-la em JSON, XML e formatos, com Embelezador de HTML e Minificador / embelezador de JavaScript para os casos vizinhos.

Como usar

Abra a ferramenta — sem registo nem instalação.
Introduza os seus dados ou ajuste as opções disponíveis.
Obtenha o seu resultado ao instante e copie-o ou descarregue-o.

Perguntas frequentes

O que é Embelezador de CSS?

Reformate CSS minificado ou desarrumado em regras limpas e bem indentadas — ou minifique de novo.

Em que casos se usa na prática?

Tornar legível um bloco gerado por uma máquina, localizar o carácter onde o parse falha e reduzir um ficheiro antes de publicar.

Qual é o erro mais comum?

Confundir válido com correto. Um documento pode ser analisado sem erros e mesmo assim não ter a forma esperada por quem o vai ler: a validação verifica a sintaxe, não o esquema.

Em que difere Embelezador de CSS de Embelezador de HTML?

Estão próximos mas respondem a perguntas diferentes: Embelezador de HTML é o que deves abrir quando se trata de transforme HTML minificado ou emaranhado em marcação legível e bem indentada — ou minifique-o. Escolhe o que corresponde ao teu ponto de partida — ambos são gratuitos.

Existe uma ferramenta para o passo seguinte?

Minificador / embelezador de JavaScript é o mais próximo a seguir a este: Minifique ou embeleze JavaScript no seu navegador, com um tokenizer que respeita strings, regex e comentários.

Que mais vale a pena ter aberto ao lado?

Minificador CSS e Gerador de sombra CSS (box-shadow) — surgem na mesma tarefa com frequência suficiente para merecerem outro separador.

De onde vêm os dados?

A análise e a serialização seguem a especificação de cada formato. A ordem das chaves e os espaços não têm valor semântico em JSON nem em YAML, pelo que um documento reformatado é equivalente mesmo com bytes diferentes.

Para saber mais

Todos os guias →

GuiaO que um minificador pode remover e o que não pode tocarA minificação tem de preservar o significado, e o interessante são os espaços que carregam significado: o combinador descendente, os espaços dentro de calc(), o intervalo entre dois elementos em linha. Medido aqui em ficheiros reais, incluindo o que o brotli já lhe ia poupar.GuiaEmbelezar ou minificar: para que serve cada um e o que faz ao pesoQuatro folhas de estilo reais passadas pelo minificador, medidas em bruto e depois de gzip. Retirar todos os espaços poupou 48, 103, 104 e 147 bytes comprimidos; retirar os comentários, 57, 1 358, 2 420 e 1 042. E as cinco entradas que este minificador parte.ExplicaçãoEscrever uma data em ISO 8601 e porque é o único formato sem ambiguidade01/02/2026 é 1 de fevereiro na maior parte da Europa e 2 de janeiro nos Estados Unidos, e nada na cadeia diz qual. A ISO 8601 resolve isso, ordena-se como texto, e deixa de servir em quatro pontos concretos que a RFC 3339 recusa.ExplicaçãoLer e escrever a hora militar americana0800 não é «oito horas» nem «08:00»: é «zero eight hundred», com uma letra de fuso no fim. Os quatro dígitos, a pronúncia, a meia-noite às 0000, a discussão do 2400, e porque é que a notação de 12 horas não consegue resolver o meio-dia.TutorialConstruir uma tabela Markdown de raiz, sem contar travessões à mãoA coisa mais pequena que ainda é uma tabela são duas linhas: uma linha de cabeçalho e uma linha delimitadora. Aqui está porque é que a segunda é obrigatória em GitHub Flavored Markdown, onde as tabelas de barras não existem de todo, e o que um gerador faz que escrever à mão não consegue.GuiaColar uma tabela num pull request: o que parte, e os dois carateres que partem tudoUma tabela Markdown proíbe exatamente dois carateres dentro de uma célula: a barra vertical e a quebra de linha. Aqui está o que cada um faz, como um conversor os trata, porque é que o escape tem de ser aplicado na ordem certa, e porque é que o alinhamento da fonte nunca conta.