— 17 · 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(262deg, #8740CE 0%, #CD3C98 100%);
background: linear-gradient(324deg, #1C65D4 0%, #5646E7 100%);
background: linear-gradient(326deg, #C9DA5D 0%, #27AA64 100%);
background: linear-gradient(32deg, #34E5BE 0%, #198AC2 100%);
background: linear-gradient(254deg, #75A4D7 0%, #5E35B6 100%);
background: linear-gradient(56deg, #E74B9E 0%, #E2D62C 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