Attraverso l’uso dei css possiamo disegnare un gradiente radiale di una certa forma (circolare o ellittica), di una certa dimensione, in una specifica posizione, che inizia con un certo colore, può continuare con altri colori, e finisce con un altro colore ancora.

Ok ammetto che non è il massimo come definizione! Però chiarisce su quali aspetti possiamo intervenire: la forma, la dimensione, la posizione e i colori.

Il gradiente si può applicare alla proprietà background oppure background-image.

Gradiente radiale di due colori – CSS Radial Gradient semplice

Vediamo ora alcuni semplici esempi che ci introducono al codice CSS del gradiente radiale e a seguire una serie di applicazioni che permettono di integrarlo nei propri progetti.

Ecco il primo semplice esempio: un gradiente che va dal giallo al rosso:

Quindi se non specificato, l’origine del gradiente corrisponde al centro dell’elemento. Ora proviamo a spostarla aggiungendo qualche valore al codice css.

L’effetto vignetta o vignettatura

Vediamo subito un’applicazione pratica: l’effetto vignetta, cioè un gradiente radiale che scurisce i quattro angoli di un’immagine. Questo effetto drammatizza l’immagine e canalizza l’attenzione verso il suo centro.

Si tratta di un gradiente ellittico che inizia con il colore trasparente (a=0) e termina con il colore pieno (a=1), in questo caso il nero. I colori vengono espressi in rgba per poter utilizzare il parametro a, cioè la trasparenza.

Sfumatura sullo sfondo

Un altro esempio pratico di applicazione di un gradiente radiale è quello di un hero dove abbiamo un’immagine che non si fonde con lo sfondo. Anziché andare a fotoritoccare l’immagine, sfrutteremo il gradiente radiale: possiamo applicare un gradiente che sfuma i margini dell’immagine in modo che si disperdano nello sfondo, fondendosi con questo.

Vediamo un esempio qui sotto: un contenitore largo con sfondo colorato, un titolo sulla destra e l’immagine sulla sinistra. Puoi cliccare sul pulsante per vedere la foto con e senza sfumatura.

In questo caso, oltre a definire il colore – rgba(221,209,197,1) abbiamo specificato la “posizione del colore” che può essere espressa con un numero percentuale, da 1 a 100. Immaginiamo un raggio che parte dal centro del gradiente e raggiunge il perimetro esterno, ora dividiamo questo raggio in 100 parti, il numero percentuale accanto al colore definisce quindi la posizione di quel colore sul nostro raggio 0-100. La posizione del colore si può esprimere in qualunque unità di misura accettata dal CSS, ma in genere si fa uso della percentuale che è svincolata dalla dimensione del contenitore.

Nel nostro caso poiché il gradiente è:
rgba(221,209,197,0) 40%,
rgba(221,209,197,1) 80%
sul nostro raggio avremo:
da 0 a 40 il colore è rgba(221,209,197,0)
da 40 a 80 il primo colore sfuma nel secondo
da 80 a 100 il colore è rgba(221,209,197,1)

Quando il numero percentuale non viene espresso, il primo colore si trova a 0, mentre l’ultimo si trova a 100, quindi il raggio è occupato interamente dalla sfumatura. Questo parametro percentuale definisce perciò la “durezza” del gradiente: minore è la distanza dei due colori sul raggio del gradiente, più brusca e netta sarà la sfumatura.

Gradiente con molti colori

Proviamo ad aumentare il numero dei colori. La prima cosa che osserviamo è che i colori si posizionano equidistanti sul nostro raggio immaginario graduato. Quindi se i colori sono 5, questi si posizioneranno a 0 – 25% – 50% – 75% – 100%

Repeating radial gradient

La funzione CSS repeating-radial-gradient () forma un’immagine composta da gradienti concentrici che si irradiano da un’origine. Accetta gli stessi argomenti del gradiente radiale, ma ripete continuamente la sequenza dei colori fino a coprire l’intero contenitore. Il passo, cioè l’ampiezza delle bande concentriche, è dato dalla distanza tra il primo e l’ultimo colore.

Animazioni CSS

Utilizzando solo CSS non è possibile animare direttamente il gradiente, ma si può ricorrere a qualche soluzione alternativa per ottenere effetti di animazione. Anziché applicare l’animazione sul gradiente, si applica sulle altre proprietà dello sfondo come la posizione (background-position) e la dimensione (background-size). Segue qualche esempio.

Nel primo esempio ho usato una animazione con @keyframes sulla proprietà background-size.

Utilizzando un testo o un svg come maschera, si possono ottenere degli effetti più interessanti. Qui lo sfondo del gradiente viene animato da opacità 1 a opacità 0, ed essendo presente un secondo gradiente sullo sfondo, sembra che i due gradienti sfumino uno nell’altro.

Qui c’è la versione hardcore, dove grazie al passo breve tra i colori si sviluppa un effetto moiré:

Con questo è tutto. Spero vi sia venuta voglia di smanettare un po’ con i css e con il gradiente radiale perché utilizzandoli si possono ottenere effetti interessanti che catturano lo sguardo (e i click).