Gradientes no CSS
Gradientes criam transições suaves entre cores sem usar imagens. linear-gradient segue uma direção (ângulo); radial-gradient irradia de um ponto central. São leves, escaláveis e perfeitos para fundos de seções, botões e cartões.
No gradiente linear, 0° vai de baixo para cima, 90° da esquerda para a direita e 180° de cima para baixo.
Como usar
- Escolha o tipo na lista: Linear ou Radial.
- No linear, ajuste o Ângulo de 0° a 360°. No radial, o controle some, porque a cor parte do centro em círculo.
- Em cada linha de cor, clique no quadrado para trocar a cor e arraste o controle para definir a posição (0% a 100%).
- Clique em + Adicionar cor para incluir mais uma parada; o × remove uma cor quando há mais de duas.
- Copie o código do campo CSS com o botão copiar.
Exemplos
- Padrão da ferramenta:
background: linear-gradient(90deg, #2563eb 0%, #9333ea 100%);, de azul para roxo da esquerda para a direita. - Três cores na diagonal:
background: linear-gradient(135deg, #2563eb 0%, #16a34a 50%, #9333ea 100%);. - Radial:
background: radial-gradient(circle, #2563eb 0%, #9333ea 100%);, azul no centro e roxo nas bordas.
Dúvidas frequentes
Posso usar mais de duas cores?
Sim. Adicione quantos "stops" quiser; cada um tem uma cor e uma posição (%) ao longo do gradiente. O código sai com as cores em ordem de posição.
Como faço uma faixa de cor sem transição?
Coloque duas paradas na mesma posição: por exemplo, azul em 50% e roxo em 50% criam uma divisão nítida no meio.