Gerador de Gradiente CSS
Escolha suas cores e ângulo, veja o resultado ao vivo e copie o CSS.
90°
background: linear-gradient(90deg, #10b981, #0ea5e9);Feito inteiramente com CSS nativo
O código gerado aqui usa apenas funções CSS de gradiente padrão — sem etapa de build, pré-processador ou biblioteca externa necessária. Cole diretamente em qualquer folha de estilo ou estilo inline.
Perguntas frequentes
Qual a diferença entre gradiente linear e radial?
Um gradiente linear transiciona as cores ao longo de uma linha reta em um ângulo escolhido, enquanto um gradiente radial transiciona as cores para fora a partir de um ponto central.
Quantas cores posso adicionar?
Você pode adicionar quantas cores quiser; o CSS é atualizado automaticamente para misturar suavemente entre todas elas, na ordem.
Isso funciona em todos os navegadores?
As funções CSS linear-gradient() e radial-gradient() são suportadas por todos os navegadores modernos.
Ferramentas Relacionadas
Você também pode precisar destas para a mesma tarefa.
Gere paletas de cores aleatórias, análogas ou complementares com HEX, RGB e HSL.
Abrir ferramentaVerifique a relação de contraste WCAG entre texto e fundo para acessibilidade AA e AAA.
Abrir ferramentaAltere largura e altura em pixels ou porcentagem e corte fotos em proporções padrão.
Abrir ferramentaCrie um QR Code Pix Copia e Cola com valor, nome e cidade em segundos.
Abrir ferramenta