Como criar gradientes CSS

linear-gradient. O mais comum. Uma transição de cor ao longo de uma linha reta. Você pode controlar a direção (cima para baixo, esquerda para direita, ângulo personalizado) e adicionar quantos stops de cor quiser.

radial-gradient. As cores irradiam de um ponto central para fora, em círculo ou elipse. Perfeito para criar efeitos de luz, botões luminosos ou fundos sutis.

conic-gradient. As cores giram ao redor de um ponto central, como setores de uma roda cromática. Ideal para gráficos circulares, medidores ou efeitos arco-íris.

repeating-linear-gradient / repeating-radial-gradient. Versões que se repetem, perfeitas para criar padrões listrados ou texturas.

Cores análogas. Escolha cores adjacentes na roda cromática (azul → violeta, laranja → vermelho). As transições são naturalmente harmoniosas e suaves.

Cores complementares. Cores opostas na roda (azul → laranja). Atenção: a transição direta pode criar uma zona acinzentada no meio. Adicione uma cor intermediária para evitar isso.

Monocromático. Variações do mesmo tom (azul claro → azul escuro). Sempre elegante e profissional. Perfeito para fundos sutis.

Evite transições abruptas. Quanto mais distantes as cores na roda, mais stops intermediários você precisa para suavizar a transição.

Dica pro: use o espaço de cor oklch() para transições perceptualmente uniformes. Gradientes em oklch são mais naturais que em RGB.

Passo 1: Escolha o tipo. Linear, radial ou cônico. Cada tipo tem suas próprias opções de personalização.

Passo 2: Selecione suas cores. Use o seletor de cores para escolher seus stops. Adicione, remova ou reordene stops com um clique.

Passo 3: Ajuste direção e posições. Mude o ângulo, ponto de partida e posição exata de cada stop para controle total.

Passo 4: Copie o código CSS. O código CSS é gerado em tempo real. Copie e cole diretamente na sua folha de estilos.

Visualização ao vivo, histórico de gradientes e sugestões de paletas populares incluídos.

Fundos de seções. Um gradiente sutil entre dois tons próximos adiciona profundidade sem distrair do conteúdo. O uso mais comum no web design moderno.

Botões e CTAs. Um gradiente torna os botões mais dinâmicos e atraentes que uma cor plana. Adicione uma leve mudança de gradiente no hover para um efeito satisfatório.

Texto em gradiente. Com background-clip: text, você pode aplicar um gradiente diretamente ao texto. Muito em alta para títulos e logos.

Overlays sobre imagens. Um gradiente semitransparente sobre uma imagem melhora a legibilidade do texto sobreposto.

Bordas. Border-image com gradiente cria bordas coloridas impossíveis com border-color clássico.

Gradientes CSS são performáticos. Diferente de imagens, são vetoriais (sem pixelização), leves (poucos bytes de código vs KB de imagem) e renderizados por GPU.

Prefira CSS a imagens. Um gradiente CSS é sempre mais rápido de carregar e mais nítido que uma imagem de gradiente. Também se adapta naturalmente a todos os tamanhos de tela.

Limite o número de stops. Mais de 4-5 stops torna o código complexo e a visualização difícil. Para gradientes muito complexos, considere SVG.

Teste no mobile. Gradientes podem parecer diferentes em telas OLED vs LCD. Sempre teste em vários tipos de tela.

Acessibilidade. Certifique-se de que o texto sobre um fundo gradiente permaneça legível em todos os pontos. Verifique o contraste WCAG em cada extremidade.