Generatore Gradiente CSS

📈 linear-gradient

Crea una transizione di colore lungo una linea retta. L'angolo definisce la direzione: 0° va dal basso verso l'alto, 90° da sinistra a destra, 180° dall'alto verso il basso.

🔴 radial-gradient

La transizione si espande dal centro verso l'esterno in forma circolare o ellittica. Perfetto per effetti luce, spotlight e sfondi organici.

🌀 conic-gradient

I colori ruotano attorno a un punto centrale. Ideale per grafici a torta CSS, indicatori di progresso e effetti arcobaleno. Supportato da tutti i browser moderni.

🔁 repeating-gradient

Ripete il pattern di colori all'infinito, creando strisce, texture e sfondi geometrici. Funziona con tutti e tre i tipi di gradiente.

🌐 Sfondi pagina e hero

I gradienti sono perfetti per le hero section. Usa un gradiente diagonale con 2-3 colori per creare profondità. Aggiungi un overlay semi-trasparente sopra un'immagine per testo leggibile su qualsiasi foto.

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

🔢 Bottoni e CTA

I pulsanti con gradiente attirano più attenzione dei colori piatti. Combina con transition e un effetto hover che inverte la direzione del gradiente per un effetto interattivo e professionale.

background: linear-gradient(90deg, #f093fb, #f5576c);
background-size: 200% auto;
transition: background-position 0.3s;

📈 Barre di progresso

Usa conic-gradient per creare indicatori circolari senza JavaScript. Perfetti per dashboard, loading spinner e visualizzazione dati. Combina con border-radius: 50% per un cerchio perfetto.

background: conic-gradient(#7c6cf0 75%, #1a1a2e 0);
border-radius: 50%;

🎨 Bordi e contorni

Crea bordi sfumati usando border-image con un gradiente, oppure il trucco background-clip con padding. Ideale per card, avatar e frame decorativi.

border-image: linear-gradient(45deg, #f093fb, #f5576c) 1;

🎨 Evita la zona grigia

Quando mescoli colori complementari (es. rosso e verde), la transizione può diventare grigia o fangosa. Aggiungi un color stop intermedio per guidare la transizione attraverso una tonalità più vivace.

💡 Contrasto testo

Se usi un gradiente come sfondo per testo, assicurati che il contrasto sia sufficiente in OGNI punto del gradiente, non solo nel centro. Usa l'anteprima testo per verificare.

⚡ Gradiente su testo

Per applicare un gradiente al testo stesso: imposta background con il gradiente, poi aggiungi -webkit-background-clip: text e color: transparent. Effetto spettacolare per titoli.

Testo gradiente base

Il metodo standard per applicare un gradiente al testo.

h1 {
  background: linear-gradient(90deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Testo gradiente animato

Aggiungi movimento per titoli e intestazioni accattivanti.

h1 {
  background: linear-gradient(90deg, #f093fb, #f5576c, #667eea);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 3s ease infinite;
}
@keyframes gradient-shift {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

Gradienti multipli sovrapposti

Sovrapponi più gradienti per effetti complessi.

background:
  linear-gradient(135deg, rgba(102,126,234,0.8), transparent),
  radial-gradient(circle at 20% 80%, #764ba2, transparent 60%),
  #0f0f23;

Sfondo mesh gradient

Simula i mesh gradient con CSS puro.

background:
  radial-gradient(at 20% 30%, #667eea 0%, transparent 50%),
  radial-gradient(at 80% 70%, #f093fb 0%, transparent 50%),
  radial-gradient(at 50% 50%, #f5576c 0%, transparent 60%),
  #0f0f23;