Generatore CSS Gradient: Guida Completa ai Gradienti Lineari e Radiali

I gradienti CSS sono uno degli strumenti visivi più potenti disponibili per i web designer — creano transizioni fluide tra colori senza un singolo file immagine, si renderizzano a qualsiasi risoluzione e si animano con le transizioni CSS. Eppure molti designer usano solo le basi: due colori, una direzione.

Questa guida copre tutta la gamma delle capacità dei gradienti CSS: i tre tipi di gradienti, i color stop avanzati, la notazione degli angoli e le tecniche creative come i mesh gradient, il testo con gradiente e gli sfondi a strisce — più considerazioni sulle performance e best practice.

Panoramica dei tipi di gradienti CSS

CSS fornisce tre funzioni di gradiente. linear-gradient() crea una transizione lungo una linea retta, definita da una direzione o angolo. radial-gradient() crea una transizione che si irradia verso l'esterno da un punto centrale, in un cerchio o ellisse. conic-gradient() crea una transizione che gira attorno a un punto centrale come una ruota dei colori o un grafico a torta. Tutti e tre sono usati come valori per la proprietà background-image e possono essere animati con @property (CSS Houdini).

Sintassi e angoli di linear-gradient

La sintassi di base è linear-gradient(direzione, color-stop-1, color-stop-2, ...). La direzione può essere una parola chiave (to bottom, to right, to bottom right) o un angolo in gradi (0deg = verso l'alto, 90deg = verso destra, 180deg = verso il basso). Il sistema degli angoli usa la misurazione in stile bussola: 0deg punta su (ore 12), aumenta in senso orario. Puoi anche usare i giri (0.25turn = 90deg) o i radianti.

/* Dichiarazioni equivalenti */
background: linear-gradient(to bottom, #3A7BD5, #00D2FF);
background: linear-gradient(180deg, #3A7BD5, #00D2FF);

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

/* Multi-stop */
background: linear-gradient(
  to right,
  #f093fb 0%,
  #f5576c 50%,
  #4facfe 100%
);

Color stop e transizioni

I color stop definiscono dove inizia e finisce ogni colore nel gradiente. Senza posizioni esplicite, i colori sono distribuiti uniformemente. Con le posizioni, controlli la posizione esatta: una percentuale (0–100%), una lunghezza (px, rem, em) o un'espressione calc(). Due stop adiacenti nella stessa posizione creano un bordo netto (nessuna transizione) — utile per sfondi a strisce. Un suggerimento di colore (un singolo valore tra due stop) sposta il punto medio della transizione.

/* Stop netti — strisce */
background: linear-gradient(
  to right,
  #e74c3c 0% 33%,
  #3498db 33% 66%,
  #2ecc71 66% 100%
);

/* Dissolvenza trasparente */
background: linear-gradient(
  to bottom,
  rgba(0,0,0,0),
  rgba(0,0,0,0.8)
);

radial-gradient e conic-gradient

radial-gradient() si irradia da un punto centrale. La sintassi: radial-gradient(forma dimensione at posizione, colori). Forma: circle o ellipse (predefinito). conic-gradient() gira attorno a un punto centrale: i colori sono distribuiti su 360°. Utile per grafici a torta, ruote dei colori e pattern rotazionali. La parola chiave from imposta l'angolo iniziale: conic-gradient(from 45deg, red, yellow, green). Le varianti ripetute (repeating-linear-gradient, ecc.) affiancano il pattern.

/* Riflettore radiale */
background: radial-gradient(
  circle at center,
  #3A7BD5 0%,
  transparent 70%
);

/* Conico — ruota dei colori */
background: conic-gradient(
  red, yellow, lime, cyan, blue, magenta, red
);

Tecniche creative con i gradienti

Testo con gradiente: applica un gradiente a background-image, poi usa background-clip: text e -webkit-background-clip: text con color: transparent. Bordi con gradiente: usa background con il clipping padding-box e border-box, o la proprietà border-image con un valore gradiente. Mesh gradient: affianca più gradienti radiali con posizioni e colori diversi separati da virgole. Texture rumore: combina un gradiente CSS con un filtro SVG o un'immagine di rumore semi-trasparente. Gradienti adattativi per dark mode: usa proprietà personalizzate CSS nelle funzioni di gradiente.

Performance e best practice

I gradienti CSS sono compositi GPU e hanno buone performance nella maggior parte dei casi. Evita di animare i gradienti con le transizioni CSS su background-image — i browser non possono interpolare tra valori di gradiente in modo nativo. Usa invece @property (CSS Houdini). Per aree di gradiente grandi (sfondi a pagina intera), l'uso di will-change: background può migliorare le performance di scorrimento. Testa sempre l'accessibilità dei gradienti: il testo su sfondi con gradiente deve mantenere il contrasto WCAG in ogni punto del gradiente.

Domande Frequenti