Generatore Gradienti CSS

Cosa sono i gradienti CSS?

I gradienti CSS creano transizioni fluide e continue tra due o più colori senza utilizzare immagini. Vengono renderizzati nativamente dal browser, il che significa che si adattano a qualsiasi risoluzione, si caricano istantaneamente e non generano richieste HTTP. I gradienti sono uno degli strumenti più potenti del CSS moderno per creare sfondi, pulsanti ed elementi decorativi visivamente ricchi.

Esistono due tipi principali di gradienti CSS: i gradienti lineari, che transitano lungo una linea retta, e i gradienti radiali, che si irradiano verso l'esterno da un punto centrale. Un terzo tipo, i gradienti conici, ruota attorno a un punto centrale come una ruota dei colori. Questo strumento si concentra sui gradienti lineari e radiali, che coprono la grande maggioranza delle esigenze di design.

Sintassi dei gradienti CSS

La funzione linear-gradient() accetta una direzione (angolo o parola chiave) seguita da punti di colore. La sintassi di base è background: linear-gradient(angolo, colore1 posizione1, colore2 posizione2). L'angolo è in gradi — 0deg va dal basso verso l'alto, 90deg da sinistra a destra e 180deg dall'alto verso il basso. È possibile aggiungere tutti i punti di colore necessari.

I gradienti radiali usano radial-gradient(forma dimensione at posizione, colore1, colore2). La forma può essere circle o ellipse. Le parole chiave per la dimensione (closest-side, farthest-corner, ecc.) controllano l'estensione del gradiente. Se omesse, il browser usa i valori predefiniti che di solito sembrano corretti.

Come usare questo strumento

Scegliere i colori con i selettori di colore, regolare l'angolo del gradiente con il cursore o digitando un valore in gradi, e aggiungere o rimuovere punti di colore secondo necessità. Lo strumento genera il codice CSS in tempo reale. Fare clic sul pulsante copia per copiare la regola CSS completa negli appunti, poi incollarla nel foglio di stile.

Consigli di design per i gradienti

I gradienti sottili sembrano più professionali di quelli drammatici. Uno spostamento di 10–20 gradi nella tonalità tra due colori strettamente correlati crea un aspetto elegante e moderno. Evitare di combinare più di tre colori a meno che non si stia intenzionalmente creando un effetto arcobaleno. Le aree grandi beneficiano di gradienti morbidi, mentre gli elementi UI piccoli come i pulsanti possono gestire transizioni più audaci.

Per i design in modalità scura, le sovrapposizioni di gradiente su sfondi scuri aggiungono profondità senza essere distrattive. Usare punti di colore semi-trasparenti (rgba o hsla) per creare effetti simili al vetro. Sovrapporre più gradienti usando le virgole nella proprietà background per composizioni complesse.

Considerazioni sulle prestazioni

I gradienti CSS sono accelerati dalla GPU e sono estremamente performanti — molto meglio del caricamento di immagini gradiente. Tuttavia, i gradienti molto complessi con molti punti di colore possono causare lievi differenze di rendering tra i browser. Testare sempre i gradienti in Chrome, Firefox e Safari. I browser moderni supportano i gradienti senza prefissi vendor, quindi -webkit-linear-gradient non è più necessario.

Domande frequenti

Posso animare i gradienti CSS?

Il CSS non può animare direttamente i valori del gradiente usando transition. Tuttavia, è possibile animare la background-position di un gradiente sovradimensionato, usare @property per animare le proprietà personalizzate all'interno dei gradienti, o applicare un crossfade tra due gradienti usando l'opacità su pseudo-elementi.

Qual è la differenza tra gradienti lineari e radiali?

Un gradiente lineare fa transitare i colori lungo una linea retta a un angolo specificato. Un gradiente radiale fa transitare i colori verso l'esterno da un punto centrale in forma circolare o ellittica. Scegliere il lineare per sfondi e banner, e il radiale per effetti spotlight o evidenziazioni di pulsanti.