Monte gradientes CSS em camadas, com paradas livres, interpolação em OKLCH e export em CSS, Tailwind, SCSS ou PNG.
Um gradiente CSS é uma imagem gerada pelo próprio navegador que faz a transição suave entre duas ou mais cores, sem precisar de arquivo. Esta ferramenta monta os três tipos da especificação: linear-gradient(), que segue uma direção definida por um ângulo em graus; radial-gradient(), que irradia de um ponto ajustável formando círculos ou elipses; e conic-gradient(), cujas cores giram ao redor de um centro, como os setores de um relógio. Cada cor é uma parada com posição em porcentagem e opacidade própria, e você pode adicionar, remover, arrastar ou reordenar quantas paradas quiser, com o teclado ou com o mouse. Como a propriedade background-image aceita vários gradientes separados por vírgula, dá para empilhar camadas: o primeiro valor fica por cima, e camadas com paradas translúcidas deixam ver as de baixo. Também é possível escolher o espaço de interpolação (a sintaxe moderna in oklch, in oklab, in hsl), que é o que evita a faixa acinzentada no meio de transições entre cores complementares. No CSS de saída o ângulo funciona por relógio: 0deg aponta para cima, 90deg para a direita, 180deg para baixo, diferente da convenção matemática. Use gradientes para criar profundidade, planos de fundo leves e destaques sem carregar imagens, lembrando sempre que a variação de cor pode comprometer o contraste de qualquer texto por cima.
A sintaxe base é background-image: <tipo>-gradient(<direção>, <cor> <posição>, ...). No linear, a direção é um ângulo: linear-gradient(135deg, #3DDC97 0%, #2563EB 100%) desce da esquerda-superior para a direita-inferior. O ângulo segue o relógio, 0deg é para cima, 90deg para a direita, e não a convenção matemática, o que costuma confundir quem está começando.
O radial usa radial-gradient(circle farthest-corner at 50% 50%, ...) e espalha as cores a partir do centro escolhido, com forma (círculo ou elipse) e um dos quatro tamanhos da spec; o cônico usa conic-gradient(from 0deg at 50% 50%, ...) e distribui as cores ao redor do ponto central, ideal para medidores e roscas de progresso. Os três têm a variante repeating-, que repete o trecho entre a primeira e a última parada, útil para listras e xadrez.
Sem declarar nada, o navegador interpola em sRGB, canal a canal. Entre duas cores complementares saturadas isso passa pelo centro do cubo de cor e produz um meio acinzentado: azul para amarelo, por exemplo, cruza um cinza médio antes de chegar do outro lado. O CSS Images 4 permite declarar o espaço dentro da própria função, como linear-gradient(90deg in oklch, blue, yellow).
OKLab e OKLCH são espaços perceptualmente uniformes: a mesma distância numérica corresponde mais ou menos à mesma diferença percebida, então a transição mantém saturação e não afunda a luminosidade no meio. Em espaços polares (OKLCH e HSL) ainda dá para escolher o sentido do matiz, com as palavras-chave shorter hue, longer hue, increasing hue e decreasing hue. É o longer hue que produz um arco-íris completo num gradiente cônico com apenas duas paradas da mesma cor, porque força o percurso a dar a volta inteira no círculo de matiz.
A propriedade background-image aceita vários valores separados por vírgula, e o primeiro deles é pintado por cima. É esse empilhamento que produz os fundos mais interessantes: um radial translúcido colorido sobre outro radial em outro canto, sobre uma base sólida, é a receita dos fundos tipo malha (mesh) que circulam em interfaces modernas.
Para as camadas de baixo aparecerem, as de cima precisam ter transparência, o que se escreve com hex de oito dígitos (#RRGGBBAA) ou com a opacidade por parada. Vale também combinar as camadas com background-blend-mode, que aplica multiplicação, divisão, sobreposição ou diferença entre elas, e definir uma background-color como fundo sólido embaixo de tudo.
Gradientes servem para heros, botões, cartões, barras de progresso e overlays que dão profundidade sem custo de rede, já que são calculados pelo navegador e ficam nítidos em qualquer resolução. Quando o destino não aceita CSS (uma capa de post, um slide, um e-mail), exporte o mesmo gradiente como PNG e use a imagem.
O ponto de atenção é o texto por cima: em um gradiente a luminância muda ponto a ponto, então uma cor de texto que passa no contraste sobre uma extremidade pode falhar na outra. As diretrizes WCAG pedem no mínimo 4,5:1 para texto normal e 3:1 para texto grande; verifique o contraste contra o trecho mais claro E o mais escuro do gradiente, ou aplique uma camada semitransparente para uniformizar o fundo sob o texto.
Cole o código no seu HTML e a ferramenta aparece na sua página, sem a navegação e sem os anúncios do J-Kit. Ela continua rodando no navegador de quem visita o seu site.
<iframe
src="https://jkit.tools/embed/pt-BR/gradient-generator"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Gerador de Gradientes"
></iframe>Estas referências ajudam a contextualizar fórmulas, padrões, APIs e limitações usadas nesta página. Elas não substituem validação profissional quando o resultado tiver impacto jurídico, financeiro, médico ou operacional.
Sim. Ela monta os três tipos definidos na especificação CSS, linear-gradient(), radial-gradient() e conic-gradient(), mais as variantes repeating- de cada um, e entrega o código pronto para colar. Você controla o ângulo, o centro, a forma e o tamanho, adiciona quantas paradas quiser e ajusta cor, posição e opacidade de cada uma.
background-image: linear-gradient(135deg, #3DDC97 0%, #2563EB 100%);O CSS e o PNG são gerados localmente no navegador.