Gerador de gradientes CSS

Um gradiente CSS é uma imagem que o navegador desenha na hora: basta colocá-lo em background ou background-image, sem baixar arquivos, e ele continua nítido em qualquer tamanho. A sintaxe linear é linear-gradient(ângulo, parada 1, parada 2, …). 0deg vai de baixo para cima, 90deg da esquerda para a direita e o padrão, 180deg, de cima para baixo; 135deg cria a popular diagonal do canto superior esquerdo ao inferior direito. O radial-gradient se espalha a partir de um centro e é ótimo para holofotes, brilhos ou dar volume a botões.

Uma parada de cor combina cor e posição, como #f59e0b 0% e #10b981 100%. Paradas intermediárias controlam o ritmo da transição, e colocar duas na mesma posição (por exemplo 50% e 50%) faz a cor mudar de uma vez, criando listras nítidas ou fundos divididos. Aqui cada parada tem posição e opacidade próprias; a opacidade sai como rgba(), útil para sobreposições que mantêm o texto branco legível sobre fotos.

Algumas dicas: se as pontas de um gradiente grande estiverem muito distantes no círculo cromático, o meio pode ficar cinza e sem vida; adicione uma cor intermediária ou escolha matizes próximos. Gradientes muito sutis podem mostrar degraus visíveis (banding) em algumas telas; aumentar um pouco a diferença ou incluir uma terceira parada ajuda. Para texto em gradiente, defina o gradiente como fundo e combine com background-clip: text e color: transparent.

Navegadores modernos suportam linear-gradient e radial-gradient sem prefixo há anos, então o CSS copiado funciona direto, sem -webkit-. Comece por um modelo pronto, ajuste ângulo e paradas, confira a prévia ao vivo e copie o código com um clique.