Gerador de Gradientes
Gradientes lineares, radiais e cônicos com múltiplos stops de cor.
Propriedades CSS utilizadas
linear-gradient()Cria uma transição de cor em linha reta. O primeiro valor é o ângulo (em graus), seguido pela lista de cores e suas posições.
radial-gradient() / conic-gradient()Radial parte do centro para as bordas em forma circular/elíptica; conic gira as cores em torno de um ponto, como um relógio.
Perguntas frequentes
Sim, adicione até 5 pontos de cor com posições independentes.
Sim — tecnicamente todo gradiente CSS é um tipo de imagem, por isso pode ser usado em background-image ou na propriedade abreviada background.
Diretamente não é performático. O truque comum é animar background-position em um gradiente maior que o elemento, ou fazer crossfade entre dois elementos com opacity.
Ferramentas relacionadas
Gerador de Glassmorphism
Efeito de vidro fosco com backdrop-filter, transparência e bordas sutis.
Gerador de Neumorphism
Superfícies suaves com sombras duplas — o mesmo estilo usado neste site.
Gerador de Paleta de Cores
Gere paletas harmônicas — complementar, análoga, tríade — a partir de uma cor base.