Gerador de gradiente CSS

Como usar o gerador de gradiente CSS

Comece escolhendo o tipo. No linear, as cores avançam em linha reta e você define a direção com o controle de ângulo, de 0 a 360°. No radial, elas se espalham a partir do centro e você escolhe a forma: circle (círculo) ou ellipse (elipse, que acompanha a proporção do elemento).

Depois ajuste as paradas de cor. O gerador aceita de 2 a 6 paradas, cada uma com seu seletor de cor e uma posição de 0 a 100%. Adicione uma parada quando precisar de uma transição intermediária e remova as que não fazem diferença. Se preferir partir de algo pronto, aplique um dos presets e ajuste a partir dele. A prévia atualiza a cada mudança, o botão de copiar entrega a linha background: linear-gradient(...) pronta para colar no seu CSS, e você também pode baixar o gradiente como imagem PNG, útil onde CSS não é aceito, como em ferramentas de apresentação ou imagens para redes sociais.

A sintaxe do linear-gradient e do radial-gradient

Um gradiente CSS é uma imagem gerada pelo navegador, por isso ele entra na propriedade background (ou background-image), e não em background-color. A forma linear recebe uma direção opcional seguida da lista de cores:

.hero { background: linear-gradient(135deg, #FF7F50 0%, #E2725B 100%); }

A forma radial recebe primeiro a forma e, se quiser, o ponto central:

.badge { background: radial-gradient(circle at center, #FFD700 0%, #FFA500 100%); }

Sem direção, o linear vai de cima para baixo; sem forma, o radial usa ellipse. A referência completa das duas funções está na documentação da MDN.

Ângulos e palavras-chave de direção

No CSS, 0deg aponta para cima e os ângulos crescem no sentido horário: 90deg vai para a direita, 180deg para baixo e 270deg para a esquerda. As palavras-chave são equivalentes legíveis: to right é o mesmo que 90deg e to bottom é o mesmo que 180deg.

A diferença aparece nas diagonais. to bottom right não é sempre 135deg: o navegador calcula o ângulo para que o canto superior esquerdo e o inferior direito recebam exatamente as cores das pontas, então ele muda conforme a proporção do elemento. Num quadrado dá 135°; num banner largo, o ângulo fica mais próximo da horizontal. Use a palavra-chave quando quiser que o gradiente acompanhe o formato da caixa e um ângulo fixo quando precisar da mesma inclinação em elementos de tamanhos diferentes.

Paradas de cor e hard stops

Cada parada diz onde uma cor atinge 100% de presença. Entre duas paradas, o navegador interpola; antes da primeira e depois da última, a cor fica sólida. Aproximar duas paradas encurta a transição, e afastá-las deixa a passagem mais suave.

Quando duas paradas têm a mesma posição, a transição desaparece e surge uma divisão nítida, o chamado hard stop. É assim que se fazem faixas e listras só com CSS:

.faixas { background: linear-gradient(90deg, #008080 0% 33%, #FAF9F6 33% 66%, #FF7F50 66% 100%); }

A sintaxe cor início fim define uma faixa sólida em uma só parada. No gerador, você chega ao mesmo resultado colocando duas paradas na mesma posição. Para listras que se repetem pelo elemento inteiro, troque a função por repeating-linear-gradient() e use posições em pixels.

Por que alguns gradientes ficam acinzentados no meio

Por padrão, o navegador mistura as cores canal a canal em sRGB. Entre cores próximas no círculo cromático isso funciona bem, mas entre cores opostas o meio perde saturação. O caso clássico é amarelo (#FFFF00) com azul (#0000FF): a média exata dos canais é rgb(128, 128, 128), ou seja, #808080, um cinza neutro no centro do gradiente.

Há duas saídas. A primeira é inserir uma parada intermediária com uma cor viva escolhida por você; o misturador de cores ajuda a encontrar esse tom comparando RGB, HSL e OKLCH. A segunda é pedir ao navegador que interpole num espaço perceptual:

.banner { background: linear-gradient(in oklch, #FFFF00, #0000FF); }

Em OKLCH, o matiz percorre o círculo em vez de cortar pelo centro, e a transição passa por verdes e cianos vivos. Essa sintaxe funciona nas versões atuais dos principais navegadores; se você precisa atender navegadores antigos, declare antes uma linha sem in oklch como alternativa. O guia de cores modernas no CSS explica OKLCH e as demais funções novas.

Gradiente sobre texto ou imagem: legibilidade

Um uso comum é o overlay: um gradiente translúcido sobre uma foto para dar contraste ao título. Como background aceita várias camadas, a primeira fica por cima:

.capa { background: linear-gradient(to top, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0)), url("foto.jpg") center / cover; }

O cuidado é que o contraste varia ao longo do gradiente. Meça a cor do texto contra o ponto mais claro da área onde ele fica, não contra a média. Coloque as duas cores no verificador de contraste e confira se atingem 4,5:1 para texto normal, o mínimo do nível AA da WCAG. O mesmo vale para texto preenchido com gradiente (background-clip: text): cada trecho das letras precisa de contraste suficiente com o fundo, e é prudente definir uma color sólida de reserva.

Boas práticas de desempenho e acessibilidade

• Prefira CSS a imagens. O gradiente em código não faz requisição extra e fica nítido em qualquer resolução. Guarde o PNG para os lugares que não interpretam CSS.
• Cuidado ao animar. Mudar as cores de um gradiente força o navegador a redesenhar o fundo a cada quadro. Para efeitos de hover, sobreponha dois gradientes e anime a opacity de um pseudoelemento.
• Evite faixas visíveis. Gradientes longos entre tons muito parecidos podem mostrar degraus (banding). Uma parada intermediária ou uma diferença maior entre as pontas costuma resolver.
• Não use o gradiente como única pista. Um gradiente decorativo não deve carregar informação que só aparece pela cor, e o texto precisa passar no teste de contraste em toda a sua extensão.