27 eleganti esempi di gradiente di sfondo CSS

29 Giugno 2021

Rimanere aggiornati sulle principali tendenze e standard del web design è molto importante per un designer o uno sviluppatore. Attualmente, i gradienti di sfondo sono ampiamente utilizzati nei siti Web moderni.

In questo articolo, ti guideremo attraverso diversi esempi di gradienti di sfondo utilizzando i CSS.

Gradienti di sfondo usando i CSS

Il gradiente CSS mostra una transizione graduale utilizzando due o più colori specificati. Il gradiente CSS fornisce un migliore controllo e prestazioni sull’utilizzo di un file di immagine reale (di un gradiente). La proprietà CSS background-image viene utilizzata per dichiarare i gradienti come sfondo.

Esistono tre tipi di gradienti: lineare (creato con la funzione linear-gradient() ), radiale (creato con la funzione radial-gradient() ) e conico (creato con la funzione conic-gradient() ). Inoltre, puoi creare gradienti ripetuti con le funzioni repeating-linear-gradient() , repeating-radial-gradient() e repeating-conic-gradient() .

MDN Docs definisce queste funzioni come:

linear-gradient() : la funzione CSS linear-gradient() crea un’immagine costituita da una transizione progressiva tra due o più colori lungo una linea retta. Il risultato è un oggetto del tipo di dati <gradient> , che è un tipo speciale di <image> .

radial-gradient() : la funzione CSS radial-gradient() crea un’immagine costituita da una transizione progressiva tra due o più colori che si irradiano da un’origine. La sua forma può essere un cerchio o un’ellisse. Il risultato della funzione è un oggetto del tipo di dati <gradient> , che è un tipo speciale di <image> .

conic-gradient() : la funzione CSS conic-gradient() crea un’immagine costituita da un gradiente con transizioni di colore ruotate attorno a un punto centrale (anziché irradiarsi dal centro). Esempi di gradienti conici includono grafici a torta e ruote dei colori. Il risultato della funzione conic-gradient() è un oggetto del tipo di dati <gradient> , che è un tipo speciale di <image> .

repeating-linear-gradient() : la funzione CSS repeating-linear-gradient() crea un’immagine composta da gradienti lineari ripetuti. È simile a gradient/linear-gradient() e accetta gli stessi argomenti, ma ripete le interruzioni di colore all’infinito in tutte le direzioni in modo da coprire l’intero contenitore. Il risultato della funzione è un oggetto del tipo di dati <gradient> , che è un tipo speciale di <image> .

repeating-radial-gradient() : la funzione CSS repeating-radial-gradient() crea un’immagine costituita da gradienti ripetuti che si irradiano da un’origine. È simile a gradient/radial-gradient() e accetta gli stessi argomenti, ma ripete le interruzioni di colore all’infinito in tutte le direzioni in modo da coprire l’intero contenitore, simile a gradient/repeating-linear-gradient(). Il risultato della funzione è un oggetto del tipo di dati <gradient> , che è un tipo speciale di <image> .

repeating-conic-gradient() : la funzione CSS repeating-conic-gradient() crea un’immagine costituita da un gradiente ripetuto (piuttosto che da un singolo gradiente) con transizioni di colore ruotate attorno a un punto centrale (piuttosto che irradiarsi dal centro).

Ecco la sintassi ufficiale di ogni tipo di gradiente.

Sintassi ufficiale dei gradienti lineari

linear-gradient(
 [ <angle> | to <side-or-corner> ]? ,
 <color-stop-list>
 )
 <side-or-corner> = [to left | to right] || [to top | to bottom]

Sintassi ufficiale dei gradienti radiali

radial-gradient(
 [ <ending-shape> || <size> ]? [ at <position> ]? ,
 <color-stop-list>
 );

Sintassi ufficiale dei gradienti conici

conic-gradient(
 [ from <angle> ]? [ at <position> ]?,
 <angular-color-stop-list>
 )

Ecco alcuni fantastici esempi di gradienti di sfondo che possono migliorare l’interfaccia utente del tuo sito Web al livello successivo.