Gerador de Gradiente

Criar gradientes lineares & radiais com pré-visualização. Copiar CSS.

Tipo

LinearRadial

Ângulo: 45°

Pontos de cor

#ff5e3a%

#ff2d55%

CSS

background: linear-gradient(45deg, #ff5e3a 0%, #ff2d55 100%);

Tailwind (valor arbitrário)

bg-[linear-gradient(45deg,_#ff5e3a_0%,_#ff2d55_100%)]

Como funciona

Escolha linear ou radial e adicione pontos de cor.
Arraste os pontos e ajuste o ângulo ou a posição com uma pré-visualização ao vivo.
Regule cada cor.
Copie o gradiente CSS.

Para que serve

Criar um gradiente de fundo para um hero.
Obter o CSS exato de um gradiente com vários pontos.
Experimentar visuais linear vs. radial.

Bom saber

Ele gera um gradiente CSS; malhas extremamente complexas estão além dos gradientes CSS padrão.
A renderização das cores pode variar levemente entre telas.

Perguntas frequentes

Linear ou radial: qual a diferença?

O linear mistura as cores ao longo de um eixo reto (ótimo para fundos); o radial mistura para fora a partir de um ponto central (ótimo para brilhos e focos de luz).

Posso adicionar mais de duas cores?

Sim, adicione quantos pontos de cor quiser e posicione cada um ao longo do gradiente.

Algo é enviado?

Não. O CSS do gradiente é gerado ao vivo no seu navegador.

Ferramentas relacionadas

Visualizador de DXF

Paleta de Cores

Conversor de Cores

Gerador de Box Shadow CSS

Verificador de Contraste