Guida CSS interattiva: Gradienti

Q: Come creo un gradiente radiale in CSS?

Usa background-image: radial-gradient(#93c5fd, #1e3a8a);. Aggiungi una forma e una posizione prima dei colori, per esempio radial-gradient(circle at top left, #93c5fd, #1e3a8a).

Q: Che differenza c'è tra circle ed ellipse in radial-gradient?

ellipse (il valore predefinito) si allarga secondo le proporzioni del box, quindi è largo in un box largo. circle mantiene il gradiente rotondo qualunque sia la forma del box.

Q: Come imposto la direzione di un gradiente lineare?

Metti per prima una direzione o un angolo: linear-gradient(to right, red, blue) o linear-gradient(45deg, red, blue). Il valore predefinito è to bottom (180deg); 0deg punta verso l'alto e gli angoli girano in senso orario.

Q: Come faccio strisce nette invece di una sfumatura morbida?

Dai a due colori la stessa posizione di stop: linear-gradient(90deg, #2563eb 50%, #f59e0b 50%) cambia colore a metà senza sfumatura. repeating-linear-gradient ripete uno schema di stop di questo tipo.

Q: Posso usare un gradiente come background-color?

No. Un gradiente è un'immagine, quindi va in background-image o nella forma abbreviata background. background-color: linear-gradient(...) non è valido e viene ignorato.

Gradienti radiali

radial-gradient() sfuma i colori verso l'esterno a partire da un punto centrale. Come ogni gradiente CSS, è un'immagine, quindi va in background-image (o nella forma abbreviata background):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radial gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box { width: 220px; height: 120px; border-radius: 8px; margin-bottom: 4px; }
    .ellipse { background-image: radial-gradient(#93c5fd, #1e3a8a); }
    .circle { background-image: radial-gradient(circle, #93c5fd, #1e3a8a); }
    .corner { background-image: radial-gradient(circle at top left, #fde68a, #f59e0b 40%, #b45309); }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box ellipse"></div>ellipse (default)</div>
    <div><div class="box circle"></div>circle</div>
    <div><div class="box corner"></div>circle at top left</div>
  </div>
</body>
</html>

La sintassi completa è radial-gradient(shape size at position, color stops). Tutto ciò che precede i colori è facoltativo.

Parte	Valori	Predefinito
Forma	`circle`, `ellipse`	`ellipse`
Dimensione	`closest-side`, `closest-corner`, `farthest-side`, `farthest-corner`, o lunghezze	`farthest-corner`
Posizione	`at center`, `at top left`, `at 30% 70%`, `at 20px 40px`	`at center`
Color stop	Due o più colori, ognuno con una posizione facoltativa

La parola chiave della dimensione decide dove si raggiunge l'ultimo colore: al lato più vicino del box, all'angolo più lontano e così via. Cambia i valori qui e guarda il gradiente ridisegnarsi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radial gradient tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box { height: 160px; margin-top: 10px; border: 1px solid #d1d5db; border-radius: 8px; }
    #out { font-size: 13px; }
  </style>
</head>
<body>
  <label>radial-gradient( <input id="val" value="circle closest-side at 30% 50%, #f59e0b, #2563eb" size="42"> )</label>
  <div id="box"></div>
  <code id="out"></code>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      const value = 'radial-gradient(' + input.value + ')';
      const ok = CSS.supports('background-image', value);
      if (ok) box.style.backgroundImage = value;
      document.getElementById('out').textContent = ok ? value : 'invalid gradient';
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Prova circle farthest-corner at 30% 50%, #f59e0b, #2563eb, ellipse at bottom, white, #16a34a e circle 40px, #f59e0b 99%, transparent (un punto con il bordo netto).

Gradienti lineari

linear-gradient() sfuma lungo una linea retta. Metti prima una direzione o un angolo, poi i colori:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Linear gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box { width: 160px; height: 90px; border-radius: 8px; margin-bottom: 4px; }
    .down { background-image: linear-gradient(#2563eb, #16a34a); }
    .right { background-image: linear-gradient(to right, #2563eb, #16a34a); }
    .angle { background-image: linear-gradient(45deg, #2563eb, #16a34a); }
    .three { background-image: linear-gradient(to right, #dc2626, #f59e0b, #16a34a); }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box down"></div>default (to bottom)</div>
    <div><div class="box right"></div>to right</div>
    <div><div class="box angle"></div>45deg</div>
    <div><div class="box three"></div>three colors</div>
  </div>
</body>
</html>

Gli angoli partono da 0deg, che punta verso l'alto, e girano in senso orario, quindi 90deg equivale a to right e 180deg è il valore predefinito to bottom. to right resta fisico nelle pagine da destra a sinistra; specchialo tu se il gradiente deve seguire la direzione di lettura.

Color stop e stop netti

Ogni colore può avere una posizione. Senza posizioni, i colori sono distribuiti in modo uniforme. Quando due colori condividono una posizione, il cambio è istantaneo, ed è così che disegni strisce, bandiere e barre di avanzamento:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color stops</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .bar { height: 40px; border-radius: 6px; margin: 4px 0 12px; }
    .shifted { background: linear-gradient(to right, #2563eb 70%, #f59e0b); }
    .hard { background: linear-gradient(to right, #2563eb 60%, #e5e7eb 60%); }
    .stripes {
      background: repeating-linear-gradient(45deg,
        #f59e0b 0 12px, #111827 12px 24px);
    }
    .rings { height: 120px; background: repeating-radial-gradient(circle, #2563eb 0 8px, #bfdbfe 8px 16px); }
  </style>
</head>
<body>
  Solid until 70%, then blends
  <div class="bar shifted"></div>
  Hard stop at 60% (a progress bar)
  <div class="bar hard"></div>
  repeating-linear-gradient
  <div class="bar stripes"></div>
  repeating-radial-gradient
  <div class="bar rings"></div>
</body>
</html>

Uno stop può anche avere due posizioni, #111827 12px 24px, che disegna una fascia piena da 12px a 24px.

Gradienti conici

conic-gradient() fa ruotare i colori attorno a un punto centrale, come le lancette di un orologio. Con gli stop netti disegna un grafico a torta senza immagini né JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Conic gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; display: flex; gap: 24px; }
    .pie {
      width: 140px; height: 140px; border-radius: 50%;
      background: conic-gradient(#2563eb 0 45%, #16a34a 45% 75%, #f59e0b 75%);
    }
    .wheel {
      width: 140px; height: 140px; border-radius: 50%;
      background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    }
  </style>
</head>
<body>
  <div><div class="pie"></div>45%, 30%, 25%</div>
  <div><div class="wheel"></div>A color wheel</div>
</body>
</html>

Un grafico disegnato in CSS è invisibile per gli screen reader, quindi metti i numeri anche nel testo.

Testo sfumato

Ritaglia uno sfondo sfumato sulle lettere e rendi trasparente il testo stesso:

.gradient-text {
  background: linear-gradient(90deg, #2563eb, #db2777);
  -webkit-background-clip: text; /* older browsers need the prefix */
  background-clip: text;
  color: transparent;
}

Tieni presente un color semplice di riserva: se il ritaglio non funziona, il testo sparisce. Il testo sfumato ha anche un contrasto irregolare, quindi usalo solo per i titoli grandi.

I gradienti si sovrappongono a immagini e ad altri gradienti in un unico elenco background-image; la pagina sulle immagini di sfondo spiega livelli, dimensione e posizione.

Errori comuni

background-color: linear-gradient(...). Un gradiente è un'immagine: usa background-image o background.
Gradi nella direzione sbagliata. 0deg punta verso l'alto, non a destra. 90deg va verso destra.
Un gradiente su un elemento senza altezza. Non si vede nulla; dagli del contenuto o una dimensione.
Colori intermedi spenti. Sfumare due colori saturi opposti, come rosso e verde, passa per un grigio marrone in sRGB. Aggiungi uno stop intermedio, oppure sfuma in un altro spazio colore: linear-gradient(in oklch, red, green).
Bande visibili su gradienti grandi e delicati. Colori molto vicini su un'area grande mostrano dei gradini; un po' più di contrasto tra gli stop aiuta.

Domande frequenti

Come creo un gradiente radiale in CSS?

Usa background-image: radial-gradient(#93c5fd, #1e3a8a);. Aggiungi una forma e una posizione prima dei colori, per esempio radial-gradient(circle at top left, #93c5fd, #1e3a8a).

Che differenza c'è tra circle ed ellipse in radial-gradient?

ellipse (il valore predefinito) si allarga secondo le proporzioni del box, quindi è largo in un box largo. circle mantiene il gradiente rotondo qualunque sia la forma del box.

Come imposto la direzione di un gradiente lineare?

Metti per prima una direzione o un angolo: linear-gradient(to right, red, blue) o linear-gradient(45deg, red, blue). Il valore predefinito è to bottom (180deg); 0deg punta verso l'alto e gli angoli girano in senso orario.

Come faccio strisce nette invece di una sfumatura morbida?

Dai a due colori la stessa posizione di stop: linear-gradient(90deg, #2563eb 50%, #f59e0b 50%) cambia colore a metà senza sfumatura. repeating-linear-gradient ripete uno schema di stop di questo tipo.

Posso usare un gradiente come background-color?

No. Un gradiente è un'immagine, quindi va in background-image o nella forma abbreviata background. background-color: linear-gradient(...) non è valido e viene ignorato.

Concetti correlati