Gerador de Gradiente

A ferramenta de gradiente cria degradês CSS para interfaces, fundos, botões, gráficos e protótipos. Em vez de escrever manualmente cada linear-gradient ou radial-gradient, você ajusta cores, pontos de parada, direção, ângulo e opacidade enquanto vê o resultado. Ela é útil quando o degradê precisa seguir uma paleta de marca, manter o texto legível ou suavizar mudanças entre estados visuais. O CSS gerado é apenas a parte de implementação; a qualidade vem de escolher cores com contraste adequado e de usar o gradiente para apoiar o conteúdo, não para competir com ele.

Gradientes CSS são valores de imagem, não cores — linear-gradient(), radial-gradient() e conic-gradient() resolvem para tokens <image> que o navegador rasteriza dentro de qualquer slot de background-image, mask-image ou border-image. A forma linear recebe um ângulo (0deg aponta para cima, 90deg aponta para a direita, aumentando no sentido horário) ou uma palavra-chave 'to <side>' que é calculada a partir da diagonal da caixa, seguida de uma lista separada por vírgulas de paradas de cor com posições opcionais em porcentagem ou comprimento. A forma radial aceita um formato (circle | ellipse), uma palavra-chave de tamanho (closest-side, farthest-corner é o padrão) e uma âncora 'at <position>'. A forma cônica varre as paradas ao redor de um hub começando em 'from <angle>' e é suportada no Chrome 69+, Safari 12.1+ e Firefox 83+.<br /><br />A interpolação de cores usa sRGB por padrão, que é perceptualmente não uniforme e produz uma faixa cinza lamacenta entre tons distantes como azul e amarelo. O CSS Color Level 4 introduziu espaços de cor explícitos via a sintaxe 'in <colorspace>' — 'in oklch', 'in lab', 'in srgb-linear', 'in hsl longer hue' — para que as transições permaneçam cromáticas por todo o espectro. Faixas de cor rígidas são produzidas dando a duas paradas a mesma posição ('red 50%, blue 50%') e dicas de cor deslocam o ponto médio sem inserir uma parada ('red, 20%, blue').<br /><br />Quando um gradiente precisa sair do pipeline CSS, o Canvas expõe as mesmas primitivas: CanvasRenderingContext2D.createLinearGradient(x0, y0, x1, y1), createRadialGradient(x0, y0, r0, x1, y1, r1) e createConicGradient(startAngle, x, y) retornam objetos CanvasGradient que aceitam addColorStop(offset, color) e podem ser atribuídos a fillStyle antes de exportar via toDataURL('image/png'). O SVG oferece os equivalentes de marcação <linearGradient> e <radialGradient> com valores de spreadMethod 'pad' (padrão), 'reflect' e 'repeat' para comportamento de mosaico.

• Forma linear: linear-gradient(<angle> | to <side-or-corner>, <color-stop>+) — 0deg aponta para cima, aumenta no sentido horário; 'to bottom right' é calculado pelas dimensões da caixa, não como 135deg literal
• Forma radial: radial-gradient([<shape> <size>]? at <position>, <stops>) — palavras-chave de tamanho closest-side, closest-corner, farthest-side, farthest-corner (padrão)
• Forma cônica: conic-gradient(from <angle> at <position>, <stops>) — varre ao redor do hub; Chrome 69+, Safari 12.1+, Firefox 83+
• Interpolação de cores: CSS Color Level 4 'in oklch | lab | srgb-linear | hsl shorter|longer hue' substitui o padrão sRGB perceptualmente não uniforme que causa faixas cinza intermediárias entre tons distantes
• Paradas rígidas e dicas: duas paradas na mesma posição ('red 50%, blue 50%') criam uma faixa nítida; uma porcentagem isolada ('red, 20%, blue') é uma dica de cor que move o ponto de mistura de 50%
• Canvas API: createLinearGradient(x0,y0,x1,y1), createRadialGradient(x0,y0,r0,x1,y1,r1), createConicGradient(angle,x,y) retornam CanvasGradient; addColorStop(offset, color) e depois atribua a fillStyle
• Equivalentes SVG: <linearGradient> e <radialGradient> com spreadMethod='pad'|'reflect'|'repeat' controlam o mosaico além dos limites do gradiente