Design

Gradiente CSS.

Gradientes balanceados em HSL, com cores complementares próximas — para fundos, botões e seções de destaque.

Sobre este gerador

Gradientes harmoniosos com prévia ao vivo e código CSS pronto para copiar.

Tipo

background: linear-gradient(233deg, #3062C0 0%, #4D2FBC 100%);
background: linear-gradient(257deg, #CA2F78 0%, #D5884D 100%);
background: linear-gradient(350deg, #D93FB8 0%, #B77C24 100%);
background: linear-gradient(61deg, #49D098 0%, #494BD0 100%);
background: linear-gradient(11deg, #52E5BE 0%, #4579E3 100%);
background: linear-gradient(284deg, #BF3AD4 0%, #D5583F 100%);

Linear vs radial

Use linear para fundos extensos, hero sections e cards. Use radial para focos de luz, glows atrás de elementos e composições mais orgânicas.

Continue explorando