Gerador de gradientes CSS
Escolha 2 ou 3 cores, o tipo de gradiente e o ângulo: a prévia é atualizada em tempo real e o código CSS fica pronto para copiar.
Linear ou radial: qual usar?
Um gradiente linear mistura as cores ao longo de uma linha reta: a 90° ele vai
da esquerda para a direita, a 180° de cima para baixo. É a escolha mais comum para fundos de seções hero,
botões e banners. Um gradiente radial parte do centro e se espalha
em círculo para fora, o que funciona muito bem para efeitos de brilho, fundos suaves e avatares. De qualquer
forma, o código gerado usa as funções nativas linear-gradient() e
radial-gradient() , compatíveis com todos os navegadores modernos e sem prefixos de
fabricante.
Como usar o código gerado
Copie a linha e cole na sua folha de estilos como valor da propriedade background
em qualquer elemento: uma div, o body, um card. Com 3 cores o
navegador distribui as paradas de forma uniforme (0%, 50%, 100%); se você precisar de mais controle, adicione os percentuais
à mão depois de cada cor, por exemplo #ff8a5c 20%. Uma dica útil: duas cores
próximas produzem transições elegantes e sutis, enquanto duas cores opostas criam um
contraste forte, perfeito para chamadas para ação.