Gerador de Gradiente CSS

Como usar?

Comece escolhendo o tipo de gradiente, linear ou radial, depois mexa nas cores e na posição de cada parada e copie o CSS que aparece. Esse código vai direto na propriedade background ou background-image do elemento.

Gradientes CSS: tipos, interpolação e performance

Um gradiente CSS é uma função — não uma imagem — que o navegador avalia pixel a pixel no momento de pintura, produzindo uma transição suave entre cores. Como o cálculo acontece na GPU, o gradiente escala para qualquer tamanho sem perda de qualidade e sem requisição de rede adicional — diferente de um PNG, em que um fundo 2000×2000 pode pesar várias centenas de KB. O CSS moderno expõe quatro funções: linear-gradient(), radial-gradient(), conic-gradient() e suas variantes repeating-* para padrões tileáveis.

A sintaxe básica de um gradiente linear recebe um ângulo (ou uma keyword como to right, to bottom right) seguido por duas ou mais paradas de cor:

background: linear-gradient(45deg, #ff6b6b 0%, #4ecdc4 100%);
background: radial-gradient(circle at top right, gold, transparent 70%);
background: conic-gradient(from 0deg, red, yellow, lime, cyan, blue, magenta, red);

Linear, radial e cônico — quando usar cada um

• linear-gradient — o mais comum: fundos de hero, botões, banners. Aceita ângulo de 0° (de baixo para cima) a 360°.
• radial-gradient — irradia de um ponto (circle ou ellipse); ideal para spotlights, vignettes e efeitos glow.
• conic-gradient — varre angularmente em torno de um centro; é o que viabiliza gráficos pizza só em CSS, color wheels e spinners de loading. Chrome 69+/Safari 12.1+.
• repeating-*-gradient — repete as paradas para formar padrões tileáveis: listras, fitas, xadrezes sem nenhum asset de imagem.

Color stops e hard stops

Cada parada de cor aceita uma posição opcional (red 20%, blue 80%) que controla onde a cor começa e termina de interpolar. Usar a mesma posição em duas paradas adjacentes cria um hard stop, produzindo listras sólidas sem anti-aliasing:

background: linear-gradient(red 0%, red 50%, blue 50%, blue 100%);
/* resultado: retângulo metade vermelho, metade azul, sem transição */

Interpolação: sRGB vs OKLCH

Até 2023 todos os navegadores interpolavam gradientes em sRGB, o que produz uma faixa cinza-amarronzada quando as duas paradas são complementares (azul → amarelo passa por cinza). O CSS Color 4 permite interpolar em espaços perceptuais como oklch ou hsl longer hue:

background: linear-gradient(in oklch to right, blue, yellow);
/* transição vibrante passando por verde, sem o cinza no meio */

Performance e acessibilidade

Gradientes CSS são acelerados por GPU e superam um PNG de fundo em superfícies grandes — sem decode, sem requisição HTTP, sem eviction de cache. Para shapes não-retangulares complexos (logos, badges), um gradiente SVG é preferível porque acompanha a forma. Sobre acessibilidade: texto sobre gradiente costuma precisar de text-shadow ou uma camada backdrop-filter com blur para atingir o contraste WCAG AA 4.5:1 — meça os dois extremos do gradiente contra a cor do texto, não apenas um.

Perguntas frequentes

Posso usar transparência em um gradiente? Sim. Use rgba(), hsla() ou qualquer cor com canal alpha. Um truque comum é fazer fade para transparent sobre uma imagem para criar overlays de texto — mas atenção: o Safari historicamente interpretava transparent como rgba(0,0,0,0), gerando fades acinzentados. Use rgba(255,255,255,0) quando o fundo for claro.

Gradiente ou imagem de fundo — qual rende mais? O gradiente ganha em qualquer transição lisa de cor: zero bytes de rede, pintura na GPU, escala infinita. A imagem ganha para conteúdo fotográfico ou efeitos artísticos complexos que não cabem em matemática.

Gradiente SVG ou CSS? Use CSS para fundos em elementos retangulares. Use <linearGradient> / <radialGradient> dentro de SVG para preencher logos, ícones e shapes não-retangulares — o gradiente acompanha o path.

E o suporte dos navegadores? Linear e radial têm ~98% de suporte (todo navegador desde 2012). Conic está em ~95% (Chrome 69+, Safari 12.1+, Firefox 83+). Interpolação em oklch requer Chrome 111+, Safari 16.4+, Firefox 113+.