Preciso do # nas cores?

Recomendado. Cores sem # recebem # automaticamente na geração.

Sim, usa a mesma regra CSS copiada.

Não nesta ferramenta. Use hex ou nomes compatíveis com o builder.

Gerador de Gradientes

Monte gradientes CSS lineares e copie o código.

Design

Monte gradientes CSS lineares com preview ao vivo.

Ângulo (graus)

Cor inicial

Cor final

Cor intermediária (50%)

CSS gerado

Monte gradientes lineares ajustando ângulo e duas ou mais cores. Visualize ao vivo e copie a regra CSS pronta.

Defina ângulo, cores inicial e final (e opcionalmente uma cor intermediária) e copie o CSS gerado.

Clássico roxo.

Entrada

135°, #667eea → #764ba2

Saída

linear-gradient(...)

Ângulo 90°.

Entrada

90°, #fff → #000

Saída

Degradê claro-escuro

Cor no meio.

Entrada

0%, 50%, 100%

Saída

Transição suave

Nesta versão, apenas linear-gradient.