Gerador de gradientes CSS
Crie gradientes visualmente e copie o CSS.
Crie gradientes lineares ou radiais com duas cores, um ângulo e uma posição de parada. Veja a pré-visualização enquanto ajusta e copie a declaração CSS final.
135°
100%
Cor inicial
Cor final
background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);Como criar um gradiente
- Escolha linear ou radial como tipo de gradiente.
- Selecione suas duas cores com os seletores.
- Ajuste o ângulo e a posição de parada com os controles deslizantes.
- Copie o CSS gerado e cole na sua folha de estilos.
Perguntas frequentes
Qual é a diferença entre linear e radial?
Um gradiente linear flui em uma direção ao longo de uma linha reta, enquanto o radial se espalha a partir de um ponto central.
Posso usar o resultado em estilos inline?
Sim. Copie a declaração background para qualquer regra CSS ou atributo style.
As cores saem do meu navegador?
Não. O gerador funciona inteiramente no seu dispositivo, sem envios.