Gerador de Gradiente CSS

Como usar o gerador de gradiente CSS

1. Escolha o tipo Linear ou Radial.
2. Para gradientes lineares, arraste o controlo Direção para definir o ângulo.
3. Escolha cores para cada ponto. Clique em + Adicionar ponto para adicionar mais. A prévia e o CSS atualizam-se instantaneamente.
4. Clique em Copiar para copiar a propriedade CSS background pronta a usar.

Sintaxe de gradientes CSS

Gradientes lineares: transição de cores ao longo de uma linha reta:

background: linear-gradient(90deg, #FF5733, #3498DB);

O ângulo pode ser em graus (0deg = baixo para cima, 90deg = esquerda para direita) ou como palavra-chave: to right, to bottom right.

Gradientes radiais: transição para fora a partir de um ponto central:

background: radial-gradient(circle, #FF5733, #3498DB);

Pontos de cor

Ambos os tipos aceitam qualquer número de pontos de cor com posições opcionais:

background: linear-gradient(to right, red 0%, yellow 50%, green 100%);

Usos de gradientes em CSS

• Fundo: background: linear-gradient(...);
• Texto degradado: combinar background-clip: text com -webkit-text-fill-color: transparent
• Efeitos de esvanecimento: usar gradiente como mask-image para transições nas bordas
• Borda degradada: border-image com gradiente

Suporte nos navegadores

linear-gradient e radial-gradient têm suporte completo em todos os navegadores modernos desde IE 10. Não é necessário prefixo de fornecedor.