Cos'è un gradiente di colore e come crearlo in CSS

Un gradiente CSS è una transizione fluida tra due o più colori generata direttamente dal browser, senza bisogno di alcun file immagine. Questo solo fatto rende i gradienti uno degli strumenti più pratici nel kit di ogni sviluppatore front-end. Riducono le richieste HTTP, si adattano perfettamente a qualsiasi risoluzione e possono essere aggiornati con una singola riga di codice. Che tu stia stilizzando un pulsante call-to-action, costruendo lo sfondo di una hero section a tutta pagina o aggiungendo profondità a un componente card, capire come funzionano i gradienti CSS ti dà un controllo preciso su ogni pixel di quella transizione.

Gradienti lineari spiegati

La funzione linear-gradient in CSS disegna una transizione di colore lungo una linea retta. La sintassi di base è la seguente:

background-image: linear-gradient(direzione, color-stop1, color-stop2, ...);

Il parametro direzione controlla l'angolo del gradiente CSS. Puoi usare valori come to right, to bottom left, oppure un angolo in gradi come 135deg. Se non viene specificata alcuna direzione, il valore predefinito è to bottom (dall'alto verso il basso, 180 gradi).

I color stop ti danno un controllo granulare. Ogni stop può includere una posizione opzionale:

/* Due colori, da sinistra a destra */
background-image: linear-gradient(to right, #6a11cb, #2575fc);

/* Tre colori con posizioni esplicite */
background-image: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #fda085 100%);

Aggiungere una posizione percentuale a ogni stop ti permette di creare bordi netti (impostando due stop alla stessa posizione) oppure di comprimere o espandere la zona di transizione. Questa è la base per creare pattern a strisce e barre di avanzamento. Prima di utilizzare i valori dei colori, assicurati di capire come CSS li interpreta: la nostra guida alla conversione HEX in RGB spiega le differenze tra i vari formati e quando usare ciascuno.

Gradienti radiali spiegati

Un gradiente radiale CSS si irradia verso l'esterno a partire da un punto centrale, con una forma ellittica o circolare. La sintassi aggiunge tre parametri opzionali: forma, dimensione e posizione.

background-image: radial-gradient(forma dimensione at posizione, color-stop1, color-stop2);

Ecco cosa fa ciascun parametro:

• Forma: circle forza un cerchio perfetto; ellipse (il valore predefinito) si adatta alle dimensioni dell'elemento.
• Dimensione: Parole chiave come closest-side, farthest-corner o lunghezze esplicite controllano fino a dove si estende il gradiente.
• Posizione: Funziona esattamente come background-position - puoi usare parole chiave, percentuali o valori in pixel.

/* Effetto spotlight */
background-image: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.3), transparent 60%);

I gradienti radiali sono ideali per effetti spotlight, pulsanti luminosi e overlay vignette morbide sulle immagini hero.

Gradienti conici - La novità moderna

La funzione conic-gradient in CSS è la più recente delle tre ed è quella che la maggior parte degli sviluppatori tende a ignorare. Invece di irradiarsi verso l'esterno, ruota attorno a un punto centrale come una ruota dei colori o un grafico a torta. La specifica W3C CSS Images Level 4 definisce formalmente i gradienti conici, e tutti i browser moderni li supportano ormai pienamente.

/* Grafico a torta - 40% blu, 60% corallo */
background-image: conic-gradient(#4f8ef7 0% 40%, #ff6b6b 40% 100%);

/* Ruota dei colori completa */
background-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

Puoi anche ruotare l'angolo di partenza con from Xdeg e spostare il centro con at X% Y%:

background-image: conic-gradient(from 45deg at 60% 50%, #667eea, #764ba2, #667eea);

Gli utilizzi pratici includono grafici a torta realizzati in puro CSS, pattern a scacchiera e spinner di caricamento dinamici.

Gradienti ripetuti

CSS mette a disposizione repeating-linear-gradient e repeating-radial-gradient per piastrellare un pattern di gradiente su un elemento senza dover elencare manualmente decine di color stop. La regola fondamentale: il pattern si ripete solo se l'ultimo color stop non raggiunge il 100%.

/* Strisce diagonali */
background-image: repeating-linear-gradient(
  45deg,
  #f8f9fa,
  #f8f9fa 10px,
  #dee2e6 10px,
  #dee2e6 20px
);

/* Anelli concentrici */
background-image: repeating-radial-gradient(
  circle at center,
  #fff 0px,
  #fff 5px,
  #e9ecef 5px,
  #e9ecef 10px
);

I gradienti ripetuti sono efficienti in termini di prestazioni perché il browser genera l'intero pattern a partire da una regola CSS compatta, senza alcuna risorsa immagine da scaricare.

Esempi pratici

Pulsante con gradiente

Un caso d'uso comune è un pulsante call-to-action vivace. Il trucco sta nell'impostare anche background-size e animare il comportamento al passaggio del mouse:

.btn-gradient {
  background-image: linear-gradient(90deg, #6a11cb, #2575fc);
  border: none;
  border-radius: 6px;
  color: #fff;
  padding: 12px 28px;
  transition: opacity 0.3s ease;
}
.btn-gradient:hover {
  opacity: 0.85;
}

Sfondo hero a tutta pagina

Un gradiente come sfondo CSS applicato al body o a una sezione hero definisce immediatamente il tono visivo della pagina:

.hero {
  background-image: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  min-height: 100vh;
}

Overlay scuro su un'immagine

Sovrapporre un gradiente a una foto mantiene il testo leggibile senza bisogno di un elemento overlay separato:

.card-image {
  background-image:
    linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.75) 100%),
    url('photo.jpg');
  background-size: cover;
}

Gradiente sul testo

I gradienti sul testo richiedono tre proprietà che lavorano insieme:

.gradient-text {
  background-image: linear-gradient(90deg, #f093fb, #f5576c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Tieni presente che background-clip: text richiede ancora il prefisso -webkit- in alcuni browser, quindi includi sempre entrambe le dichiarazioni. Puoi esplorare e validare le tue scelte cromatiche prima di scrivere qualsiasi codice usando lo strumento Color Explorer.

Compatibilità browser e fallback

I gradienti lineari e radiali sono supportati pienamente da tutti i principali browser dal 2013. I gradienti conici hanno raggiunto un supporto ampio nel 2021 (Chrome 69, Firefox 83, Safari 12.1). Secondo Can I Use, i gradienti conici coprono oggi oltre il 93% dell'utilizzo globale dei browser.

La strategia di fallback corretta è semplice:

1. Dichiara prima un background-color solido. I browser che non supportano il gradiente mostreranno questo colore.
2. Aggiungi poi la regola background-image con il gradiente. I browser compatibili la sovrappongono al colore di sfondo.
3. Per i gradienti conici, inserisci un fallback con linear-gradient tra il colore solido e la regola conica.

.element {
  background-color: #6a11cb;                        /* fallback */
  background-image: linear-gradient(90deg, #6a11cb, #2575fc); /* browser moderni */
}

Dopo aver scritto le tue regole di gradiente, considera di far passare il tuo foglio di stile attraverso un CSS Minifier per eliminare gli spazi superflui e ridurre la dimensione del file prima del deploy.

Genera gradienti CSS all'istante

Scrivere la sintassi dei gradienti a mano è rapido una volta che conosci le regole, ma visualizzare in tempo reale decine di combinazioni di colori è il momento in cui un generatore di gradienti online fa davvero la differenza. Invece di ricaricare continuamente il browser, puoi trascinare i color stop, regolare gli angoli e copiare il CSS finale in pochi secondi.

Se hai bisogno di convertire un colore da un file di design prima di costruire il tuo gradiente, il convertitore HEX in RGB e il Color Picker sono entrambi ottimi punti di partenza prima di aprire il generatore di gradienti.

Crea gradienti CSS bellissimi all'istante

Gratuito, senza registrazione, funziona direttamente nel tuo browser. Genera gradienti lineari, radiali e conici con anteprima in tempo reale e output CSS pronto da copiare.

Prova subito il Color Tool di DevDeck →

Conclusione

I gradienti CSS sostituiscono le risorse immagine con puro codice, offrendoti transizioni indipendenti dalla risoluzione, facili da aggiornare e veloci da caricare. Parti da linear-gradient per le transizioni direzionali, usa radial-gradient per effetti spotlight e bagliori, e sperimenta con conic-gradient quando hai bisogno di pattern a torta o a rotazione. Includi sempre un fallback con colore solido, tieni d'occhio i requisiti dei prefissi per i gradienti sul testo e usa uno strumento live per accelerare il ciclo di iterazione del design. Con questi elementi a disposizione, hai tutto il necessario per sostituire le immagini con gradienti statici in tutto il tuo progetto.