Generatore di gradienti CSS

Come funziona

In CSS i gradienti si scrivono come un'unica dichiarazione la cui sintassi è facile da ricordare male, in particolare la convenzione dell'angolo e la posizione dei punti di colore. Vedere il risultato mentre lo regoli è più veloce che ricaricare una pagina per controllare.

La convenzione dell'angolo fa cadere in errore

In CSS, 0 gradi puntano verso l'alto e l'angolo aumenta in senso orario, quindi 90 gradi vanno da sinistra a destra e 180 gradi dall'alto in basso. È diverso dalla convenzione matematica e da diversi strumenti di design, ed è per questo che un gradiente copiato da altrove spesso risulta ruotato.

I tre tipi

Il lineare segue una linea retta e copre quasi ogni uso reale. Il radiale si espande verso l'esterno da un punto, adatto ad aloni e riflettori. Il conico gira attorno a un centro ed è ciò con cui sono costruiti i grafici a torta e le ruote dei colori.

Un gradiente è un'immagine, non un colore

È l'altra cosa che fa inciampare. CSS tratta un gradiente come un'immagine di sfondo, quindi funziona in background e background-image ma non in color, border-color o altro che si aspetta un colore semplice. I gradienti sul testo richiedono background-clip, che è una tecnica a parte.

Aggiungere un colore intermedio

Due punti danno una miscela pulita. Un terzo permette di far passare la transizione per un'altra tonalità, evitando il grigio fangoso che compare quando due colori opposti si mescolano direttamente.