Sobre esta ferramenta
As propriedades customizadas do CSS — normalmente chamadas de variáveis CSS — permitem definir um valor uma única vez, como uma cor de marca, uma unidade de espaçamento ou uma família de fontes, e reutilizá-lo em qualquer lugar com var(--nome). Centralizar valores repetidos significa que uma única edição no nível :root se propaga por toda a folha de estilos, em vez de buscar e substituir em dezenas de arquivos, e como propriedades customizadas são valores vivos do DOM, o JavaScript ou uma media query podem lê-las e reescrevê-las em tempo de execução — permitindo troca instantânea de tema, alternância de modo escuro ou espaçamento ajustável pelo usuário sem tocar no CSS.
Digite um nome e um valor para cada linha abaixo; esta ferramenta higieniza automaticamente cada nome, removendo um "--" inicial redundante e trocando caracteres inválidos por hifens, então um erro de digitação como esquecer o prefixo ou deixar um espaço a mais nunca quebra o bloco gerado. Copie a saída :root { ... } direto para sua folha de estilos, ou baixe-a como um arquivo .css próprio para dar @import onde precisar. Tudo acontece localmente no seu navegador enquanto você digita; nada é enviado.
Perguntas frequentes
Isso envia meus valores para algum lugar?
Não. Tudo é executado localmente no seu navegador — seus pares nome/valor nunca saem do seu dispositivo.
Posso limitar as variáveis a um seletor específico em vez de :root?
Sim — defina um seletor personalizado e o bloco CSS gerado o usará em vez de :root.