Crie gradientes lineares, radiais e cônicos com paradas ilimitadas, interpolação com suporte a OKLCH e saída de utilitários Tailwind v4. Pré-visualização ao vivo, mais de 30 predefinições, no seu navegador.
Linear mistura ao longo de uma linha reta em um ângulo escolhido (0° = para cima, 90° = para a direita). Radial mistura a partir de um ponto central para fora — círculo ou elipse, com palavras-chave de tamanho como farthest-corner. Cônico gira em torno de um ponto central — as paradas de cor ficam em ângulos como ponteiros de relógio. Cônico é ótimo para gráficos de pizza, mostradores e fundos sintéticos do tipo color-wheel.
Ao fazer transição entre matizes que não são análogos — por exemplo, azul → amarelo, ou vermelho → verde. A interpolação padrão sRGB passa por um ponto médio cinza turvo; OKLCH (CSS Color Module 4 in oklch) mantém o ponto médio vívido porque interpola em um espaço perceptualmente uniforme. Para gradientes de duas paradas entre matizes semelhantes, a diferença é pequena. Para gradientes com várias paradas ou ampla faixa de matizes, OKLCH é dramaticamente melhor.
Linear / radial / cônico, suavização OKLCH, compatível com Tailwind — e alguns toques pequenos que tornam o uso realmente divertido.
Linear com ângulo de 0 a 360°, radial com círculo/elipse + tamanho + posição, cônico com ângulo inicial + posição. Todos geram sintaxe compatível com o padrão CSS Images Module Level 4.
Adicione paradas em qualquer porcentagem, arraste o controle de posição para ajustar com precisão, clique no quadrado para escolher uma cor ou cole um HEX. As paradas são ordenadas automaticamente na saída. Clique no × para remover (mínimo de 2 paradas).
Alterne entre a interpolação padrão sRGB e a moderna in oklch. OKLCH oferece pontos médios perceptualmente mais suaves — sem faixas cinzentas turvas em saltos de matiz. Tem fallback elegante em navegadores que ainda não implementaram CSS Color 4.
Três painéis de saída são atualizados ao vivo: CSS puro (background-image: linear-gradient(...)), utilitário Tailwind v4 com valor arbitrário (bg-[linear-gradient(...)]) e um snippet de design token JSON pronto para Style Dictionary ou Figma Tokens.
Sunset, Ocean, Aurora, Cyber, Royal, Neon Pink, Iris, Bullseye, Conic Wheel — clique para carregar e ajustar. Cada predefinição é um ponto de partida real com qualidade de produção, não apenas um nome.
Pré-visualização renderizada com background-image nativo, então o que você vê é exatamente o que sua folha de estilos produz. Cada pixel roda localmente — abra DevTools → Network e verifique zero requisições externas.
Quatro passos do zero até CSS, Tailwind ou JSON prontos para produção.
Linear para fundos, cabeçalhos e seções hero. Radial para holofotes, vinhetas e botões com brilho. Cônico para gráficos de pizza, rodas de cores e fundos sintéticos modernos. Alterne entre eles com as abas — suas paradas de cor são mantidas na troca.
Clique no quadrado de cor para abrir um seletor, ou cole um HEX diretamente no campo. Arraste o controle deslizante para definir a posição da parada de 0 a 100%. Clique em + Adicionar parada para inserir uma nova parada no maior intervalo (com uma cor intermediária). Até 12 paradas no total.
Para linear, defina o ângulo (0° aponta para cima, 90° para a direita). Para radial, escolha forma, palavra-chave de tamanho e posição do centro. Para cônico, defina o ângulo inicial. Mude Interpolação de cor para OKLCH e obtenha pontos médios perceptualmente suaves em gradientes multi-matiz.
Três painéis atualizam ao vivo: CSS (background-image:...), Tailwind v4 (bg-[...]), JSON (formato de design token). Use o ícone de cópia em cada um, ou clique em Baixar CSS para salvar um arquivo gradient.css pronto para usar em um projeto.
Quatro cenários comuns em que uma ferramenta de navegador com privacidade em primeiro lugar supera abrir o Figma + um site separado de gradientes.
Escolha uma predefinição próxima da sua marca, coloque suas duas cores de marca nas paradas e mude para a interpolação OKLCH para um ponto médio limpo. Copie o CSS, cole na folha de estilos da hero. Tempo total: menos de 2 minutos.
Crie um gradiente de marca com 3 paradas uma vez, copie como token de design JSON e leve para o Style Dictionary / Figma Tokens. Agora todo botão e cartão em todas as plataformas usam o mesmo gradiente por referência. Atualize em um só lugar e propaga em todos.
Gradientes cônicos sintéticos são perfeitos para gráficos de pizza, mostradores de progresso ou estados shimmer de 'carregando dados'. Escolha o tipo cônico, defina o ângulo inicial, coloque paradas nas porcentagens corretas — a matemática casa exatamente os ângulos de 0 a 360° com as posições percentuais.
Crie o gradiente, defina a proporção para corresponder ao seu alvo (16:9 para slides, 1:1 para IG, 3:1 para cabeçalho do X) e capture a tela da pré-visualização. Ou copie o CSS para um arquivo HTML único e capture no seu navegador no tamanho exato em pixels que você precisa.
Suas cores e gradientes nunca saem do seu dispositivo. Abra DevTools → Network e você verá zero requisições externas durante qualquer operação.
background-image CSS nativo — então o gradiente renderizado corresponde exatamente ao que sua folha de estilos vai produzir nos navegadores dos seus usuários.
Leituras selecionadas sobre gradientes CSS, interpolação OKLCH e sistemas de design tokens.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Linear mistura ao longo de uma linha reta em um ângulo escolhido (0° = para cima, 90° = para a direita). Radial mistura a partir de um ponto central para fora — círculo ou elipse, com palavras-chave de tamanho como farthest-corner. Cônico gira em torno de um ponto central — as paradas de cor ficam em ângulos como ponteiros de relógio. Cônico é ótimo para gráficos de pizza, mostradores e fundos sintéticos do tipo color-wheel.
Ao fazer transição entre matizes que não são análogos — por exemplo, azul → amarelo, ou vermelho → verde. A interpolação padrão sRGB passa por um ponto médio cinza turvo; OKLCH (CSS Color Module 4 in oklch) mantém o ponto médio vívido porque interpola em um espaço perceptualmente uniforme. Para gradientes de duas paradas entre matizes semelhantes, a diferença é pequena. Para gradientes com várias paradas ou ampla faixa de matizes, OKLCH é dramaticamente melhor.
Um utilitário com valor arbitrário que você pode colar diretamente em JSX / Blade / HTML: bg-[linear-gradient(45deg,#ff6b6b_0%,#feca57_50%,#ff9ff3_100%)]. Sem precisar mudar tailwind.config.js; funciona em qualquer projeto Tailwind 4. Se você prefere tokens de cor nomeados, copie o CSS e converta manualmente.
Gradientes lineares e radiais têm suporte universal desde 2014. Gradientes cônicos chegaram a todos os navegadores evergreen até 2021. A palavra-chave de interpolação in oklch é suportada no Chrome 111+, Safari 16.2+ e Firefox 113+. Se você precisa dar suporte a navegadores antigos, use a interpolação padrão sRGB — a diferença visual importa mais para gradientes com várias paradas e saltos de matiz.
Não. A geração da string do gradiente, a serialização para CSS / Tailwind / JSON e a pré-visualização ao vivo rodam todas em JavaScript no seu dispositivo. Abra DevTools → Network e você verá zero requisições externas durante qualquer operação. Cole cores de marca, tokens internos — nada sai do seu computador.