Utilore

Generatore di gradienti CSS

Trascina i cursori e guarda il pannello sopra cambiare con loro. Quando ti sembra giusto, copia la riga e incollala nel tuo foglio di stile: non serve altro.

L’angolo vale per i gradienti lineare e conico; quello radiale si espande dal centro.

Punti di colore

    Come si usa

    1. Scegli il tipo: lineare corre lungo una linea, radiale si espande dal centro, conico gira attorno a esso.
    2. Imposta l'angolo e sposta i punti dove i colori devono incontrarsi.
    3. Aggiungi altri punti se due colori non bastano, oppure premi «Sorprendimi».
    4. Copia la riga CSS sotto l'anteprima.

    Da sapere

    Perché l'anteprima sta su una scacchiera

    Un gradiente finisce spesso in un colore trasparente, e su un pannello bianco pieno quel risultato sembra identico a uno opaco. La scacchiera si vede in trasparenza ovunque il colore non sia pieno, così quello che imposti è quello che vedi — un'abitudine presa in prestito dagli editor di immagini proprio per questo motivo.

    I punti vengono ordinati prima di scrivere il codice

    Il CSS non riordina i punti colore al posto tuo: un punto al 70% scritto prima di uno al 30% fa sì che il browser blocchi il secondo, e il gradiente perde un colore senza dire niente. Lo strumento ordina i punti per posizione mentre costruisce la riga, così trascinare un cursore oltre il suo vicino non rompe mai il risultato.

    Domande frequenti

    Che differenza c'è tra i tre tipi?

    Un gradiente lineare corre lungo una retta e accetta un angolo: 90deg va da sinistra a destra, 180deg dall'alto in basso. Uno radiale si espande in cerchi dal centro, e va bene per bagliori e faretti. Uno conico gira attorno a un punto come la lancetta di un orologio, ed è quello con cui si costruiscono i grafici a torta e le ruote dei colori.

    Come faccio un gradiente con la trasparenza?

    Scegli un colore e abbassa la sua opacità nel selettore, se il tuo browser offre il canale alfa, oppure modifica a mano la riga copiata: rgba(31, 95, 214, 0) funziona come punto colore esattamente come un colore pieno. Una dissolvenza verso il trasparente è più utile di una verso il bianco, perché funziona su qualsiasi sfondo.

    Posso usarlo come colore del testo?

    Sì, con due righe in più: metti il gradiente su background-image, poi aggiungi background-clip: text e color: transparent. Il testo mantiene la sua forma e il gradiente si vede attraverso le lettere.

    Perché lo stesso angolo dà un effetto diverso in modalità radiale?

    Lì non si applica affatto. Un gradiente radiale parte dal centro e non ha direzione, quindi l'angolo resta per le modalità lineare e conica, dove decide da dove comincia il giro.

    Strumenti correlati