Utilitarioz
🎨

Gerador de Gradiente CSS

Crie gradientes CSS lineares e radiais com preview ao vivo e código pronto para copiar.

135°
0%
50%
100%
CSS
background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 50%, #06b6d4 100%);

Ferramentas Relacionadas

🌑
Novo

Gerador de Sombras CSS

Crie box-shadows CSS com preview ao vivo. Ajuste offset, blur, spread e cor.

👨‍💻 DesenvolvedorAbrir
🎯
Novo

Extrator de Cores de Imagem

Extraia a paleta de cores dominantes de qualquer imagem enviada.

👨‍💻 DesenvolvedorAbrir

O Gerador de Gradiente CSS do Utilitarioz cria gradientes lineares e radiais com múltiplas cores e preview em tempo real. Copie o código CSS gerado diretamente para o seu projeto.

Tipos de gradiente CSS

  • ▸linear-gradient — gradiente em linha reta com ângulo configurável
  • ▸radial-gradient — gradiente circular ou elíptico a partir do centro
  • ▸conic-gradient — gradiente rotacional (para gráficos de pizza CSS)

Dicas de design

  • ▸Gradientes sutis (10-20° de diferença de luminosidade) parecem mais profissionais
  • ▸Evite gradientes de cores complementares diretas — geralmente ficam feios
  • ▸Use gradiente com transparência para overlay de imagens
  • ▸Gradientes diagonais (135°) dão sensação de dinamismo

Perguntas Frequentes — Gerador de Gradiente CSS

CSS gradient funciona em todos os navegadores?

Sim. linear-gradient é suportado em todos os navegadores modernos sem prefixo. Para IE11 e abaixo, adicione o prefixo -webkit-.