Guida ai Gradienti CSS: Pattern Lineari, Radiali e Conici

I gradienti CSS creano transizioni fluide tra i colori senza immagini, risultando in zero richieste HTTP, scalabilità infinita e dimensioni file minime. Il CSS moderno supporta tre tipi di gradiente, ciascuno con potenti opzioni di configurazione. Questa guida li copre tutti con esempi pratici che puoi usare immediatamente.

Gradienti Lineari

Il tipo più comune, con transizione lungo una linea retta:

/* Dall'alto al basso (predefinito) */
background: linear-gradient(#3B82F6, #8B5CF6);

/* Con angolo */
background: linear-gradient(135deg, #3B82F6, #8B5CF6);

/* Con parole chiave di direzione */
background: linear-gradient(to right, #3B82F6, #8B5CF6);
background: linear-gradient(to bottom right, #3B82F6, #8B5CF6);

Fermate Colore

Controlla dove appare ciascun colore:

/* Distribuzione uniforme (predefinito) */
background: linear-gradient(#3B82F6, #8B5CF6, #EC4899);

/* Posizioni personalizzate */
background: linear-gradient(#3B82F6 0%, #8B5CF6 30%, #EC4899 100%);

/* Fermata netta (nessuna transizione) */
background: linear-gradient(#3B82F6 50%, #8B5CF6 50%);

Gradienti Multi-Fermata

Crea transizioni di colore complesse:

/* Gradiente tramonto */
background: linear-gradient(
  to right,
  #1E3A5F 0%,
  #FF6B35 30%,
  #FFC947 50%,
  #FF6B35 70%,
  #1E3A5F 100%
);

/* Arcobaleno */
background: linear-gradient(
  90deg,
  hsl(0, 100%, 50%),
  hsl(60, 100%, 50%),
  hsl(120, 100%, 50%),
  hsl(180, 100%, 50%),
  hsl(240, 100%, 50%),
  hsl(300, 100%, 50%),
  hsl(360, 100%, 50%)
);

Crea gradienti lineari visualmente con il nostro Generatore di Gradienti — regola colori, angoli e fermate in tempo reale.

Gradienti Radiali

Si irradiano verso l'esterno da un punto centrale:

/* Cerchio dal centro */
background: radial-gradient(circle, #3B82F6, #1E3A8A);

/* Ellisse (forma predefinita) */
background: radial-gradient(ellipse, #3B82F6, #1E3A8A);

/* Posizione personalizzata */
background: radial-gradient(circle at top left, #3B82F6, #1E3A8A);
background: radial-gradient(circle at 25% 75%, #3B82F6, #1E3A8A);

Parole Chiave di Dimensione

/* closest-side: il gradiente raggiunge il bordo più vicino */
background: radial-gradient(circle closest-side at 25% 50%, #3B82F6, #1E3A8A);

/* farthest-corner: il gradiente raggiunge l'angolo più lontano (predefinito) */
background: radial-gradient(circle farthest-corner, #3B82F6, #1E3A8A);

/* Dimensione esplicita */
background: radial-gradient(circle 200px at center, #3B82F6, #1E3A8A);

Gradienti Conici

Ruotano attorno a un punto centrale come un grafico a torta:

/* Conico base */
background: conic-gradient(#3B82F6, #8B5CF6, #EC4899, #3B82F6);

/* Segmenti a torta */
background: conic-gradient(
  #3B82F6 0deg 120deg,
  #8B5CF6 120deg 240deg,
  #EC4899 240deg 360deg
);

/* Da un angolo specifico */
background: conic-gradient(from 45deg, #3B82F6, #8B5CF6, #3B82F6);

/* Centro personalizzato */
background: conic-gradient(from 0deg at 25% 50%, #3B82F6, #8B5CF6, #3B82F6);

Gradienti Ripetuti

Tutti e tre i tipi supportano pattern ripetuti:

/* Pattern a strisce */
background: repeating-linear-gradient(
  45deg,
  #3B82F6 0px,
  #3B82F6 10px,
  transparent 10px,
  transparent 20px
);

/* Anelli concentrici */
background: repeating-radial-gradient(
  circle,
  #3B82F6 0px,
  #3B82F6 5px,
  #1E3A8A 5px,
  #1E3A8A 10px
);

/* Scacchiera (usando conico) */
background: repeating-conic-gradient(
  #E5E7EB 0% 25%,
  #F9FAFB 0% 50%
);
background-size: 40px 40px;

Sovrapporre Più Gradienti

Il CSS supporta sfondi multipli, abilitando effetti complessi:

/* Sovrapposizione gradiente su immagine */
background:
  linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)),
  url('hero.jpg');

/* Pattern a tratteggio incrociato */
background:
  repeating-linear-gradient(
    0deg,
    transparent,
    transparent 35px,
    #3B82F620 35px,
    #3B82F620 36px
  ),
  repeating-linear-gradient(
    90deg,
    transparent,
    transparent 35px,
    #3B82F620 35px,
    #3B82F620 36px
  );

Pattern UI Pratici

Testo Gradiente

.gradient-text {
  background: linear-gradient(135deg, #3B82F6, #EC4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Bordi Gradiente

.gradient-border {
  border: 3px solid transparent;
  background-image:
    linear-gradient(white, white),
    linear-gradient(135deg, #3B82F6, #EC4899);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

Sfondo Gradiente Animato

.animated-gradient {
  background: linear-gradient(-45deg, #3B82F6, #8B5CF6, #EC4899, #F59E0B);
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Considerazioni sulle Prestazioni

I gradienti sono accelerati dalla GPU e performanti:

I gradienti si renderizzano più velocemente delle immagini equivalenti
background-size influisce sul costo di rendering — tile più piccole sono più economiche
Evita di animare direttamente i colori del gradiente — anima invece background-position
Gradienti complessi con molte fermate sono comunque più veloci dei PNG

Supporto Browser

Tutti i browser moderni supportano gradienti lineari, radiali e conici. I gradienti conici sono i più recenti, supportati dal 2020 in tutti i principali browser (Chrome 69+, Firefox 83+, Safari 12.1+). Non sono necessari prefissi vendor per nessun tipo di gradiente.

FAQ

Come creo un gradiente fluido tra due colori che appaiono fangosi?

I gradienti fangosi si verificano quando si transita tra colori che passano attraverso il grigio sulla ruota dei colori. Soluzioni: aggiungi una fermata di colore intermedia nel punto medio con una tonalità più brillante, usa lo spazio colore oklch (linear-gradient(in oklch, ...)) per transizioni percettivamente uniformi, o aumenta la saturazione del colore intermedio.

I gradienti possono sostituire le immagini per gli sfondi?

Per pattern astratti, sovrapposizioni e sfondi decorativi — assolutamente. I gradienti hanno tempo di caricamento zero, scalano perfettamente e non richiedono richieste HTTP. Per visual complessi o fotografie, le immagini sono ancora necessarie. Molti design moderni combinano entrambi: una sovrapposizione gradiente su un'immagine di sfondo.

Risorse Correlate

Generatore di Gradienti — Crea gradienti CSS visualmente
Consigli per il Design delle Palette Colori — Scegli i colori per i tuoi gradienti
Formati Colore Spiegati — Comprendi la notazione colore nel CSS