Generatore di gradienti CSS
Crea un gradiente a occhio e copia il CSS.
Trascina una maniglia per spostare un punto, o clicca sulla barra per aggiungerne uno. Le maniglie si spostano anche con i tasti freccia.
Punti colore
- %
- %
- %
Funziona nel browser. Quello che scrivi non viene inviato da nessuna parte.
- Trascina per posizionare i punti
- Lineare, radiale e conico
- 8 preset pronti all'uso
Come creare un gradiente CSS
- Scegli un preset, oppure imposta il colore di ogni punto.
- Trascina le maniglie sulla barra, e clicca sulla barra per aggiungere un punto.
- Copia il CSS e incollalo nel tuo foglio di stile.
Confronto tra i tipi di gradiente
| Tipo | Come si espande | Funzione CSS |
|---|---|---|
| Lineare | Lungo una linea retta a un angolo | linear-gradient() |
| Radiale | Verso l'esterno da un punto centrale | radial-gradient() |
| Conico | Attorno a un punto centrale, come una ruota dei colori | conic-gradient() |
Supporto browser per tipo di gradiente
| Tipo di gradiente | Richiede almeno |
|---|---|
| Lineare e radiale | Tutti i browser attuali, fino a IE10 con un prefisso |
| Conico | Chrome 69, Firefox 83, Safari 12.1 |
Il CSS fornito da questa pagina inizia sempre con una riga background-color a tinta unita, così un browser che non sa disegnare il gradiente mostra comunque il colore del primo punto invece di un riquadro vuoto.
Consigli per gradienti più morbidi
- Aggiungi un terzo punto al centro così il gradiente si legge come due colori che sfumano attraverso un terzo, invece di una semplice dissolvenza a due toni.
- Per un bordo netto invece di una sfumatura, assegna la stessa posizione a due punti vicini.
- 0deg va dal basso verso l'alto e 90deg da sinistra a destra. Aggiungi 180 a qualsiasi angolo per invertire la direzione di un gradiente senza riscrivere ogni punto.
- Abbina la forma radiale al riquadro: cerchio per elementi quadrati, ellisse per quelli larghi, così il gradiente non sembra allungato.
Domande su Generatore di gradienti CSS
Come si crea un gradiente in CSS?
Imposta la proprietà background su una funzione gradiente, come background: linear-gradient(90deg, #ff7e5f, #feb47b). Il primo valore è la direzione, poi vengono i colori, ciascuno con una posizione facoltativa.
Qual è la differenza tra gradiente lineare, radiale e conico?
Un gradiente lineare cambia colore lungo una linea retta, un gradiente radiale si espande da un punto centrale, e un gradiente conico ruota attorno a un punto centrale come una ruota dei colori o una torta a fette.
In che direzione punta l'angolo?
0deg va dal basso verso l'alto, 90deg da sinistra a destra, 180deg dall'alto verso il basso e 270deg da destra a sinistra. Per i gradienti conici l'angolo imposta dove inizia la rotazione.
Come ottengo una linea netta tra due colori?
Assegna la stessa posizione a due punti vicini, ad esempio rosso al 50% e blu al 50%. Il colore cambia allora in modo netto in quel punto invece di sfumare.
I gradienti CSS funzionano in tutti i browser?
I gradienti lineari e radiali funzionano in tutti i browser attuali. Quelli conici richiedono Chrome 69, Firefox 83 o Safari 12.1 e versioni successive. Il CSS qui parte con una riga a colore pieno come ripiego.
Posso animare un gradiente CSS?
Puoi animare background-position o background-size su un gradiente sovradimensionato per un effetto di movimento. Animare i colori dei singoli punti richiede la regola CSS @property o un piccolo script, perché i browser da soli non possono interpolare tra due gradienti completi.
Un gradiente può essere usato come colore del testo?
Sì. Copia il CSS del gradiente qui in un background, poi aggiungi background-clip: text e color: transparent all'elemento di testo così il gradiente si vede attraverso le lettere invece di riempire un riquadro.