Come si usa
- Scegli un gradiente lineare, radiale o conico, quindi imposta l'angolo o la posizione del centro.
- Imposta il colore, l'opacità e la posizione di ogni interruzione. Aggiungine fino a sei o rimuovi quelle che non ti servono.
- Controlla l'anteprima, quindi copia la riga CSS nel foglio di stile.
Come funziona
Il risultato è una dichiarazione CSS background standard. I gradienti lineari seguono un angolo: 0deg va dal basso verso l'alto, 90deg da sinistra a destra, 180deg dall'alto verso il basso. I gradienti radiali si espandono da un punto centrale, formando un cerchio o un'ellisse adattata al riquadro. I gradienti conici ruotano attorno a un punto centrale, partendo dall'angolo scelto; sono utili per effetti a spicchi e ruote dei colori.
Le interruzioni di colore sono ordinate in base alla loro posizione, che puoi trascinare liberamente. Un'interruzione con opacità ridotta viene scritta come rgba(), consentendo allo sfondo di trasparire. Due interruzioni nella stessa posizione creano un bordo netto anziché una sfumatura: è così che si ottengono le strisce.
Tutte e tre le funzioni di gradiente sono supportate da tutti i browser attuali. Per impostazione predefinita, i gradienti si fondono nello spazio colore sRGB; tra colori complementari (ad esempio blu e giallo) il risultato può apparire leggermente grigio. Aggiungere un'interruzione intermedia con un colore più brillante evita questo effetto.
Esempi
Sfondo tenue per intestazione
linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%) crea una sfumatura delicata dall'alto verso il basso, che mantiene leggibile il testo scuro.
Strisce a bordi netti
Usa quattro interruzioni: #0b5d1e 0%, #0b5d1e 50%, #f2c14e 50%, #f2c14e 100%. Le due interruzioni al 50% si incontrano senza sfumarsi, creando due metà a tinta unita.
Effetto riflettore
Un gradiente radiale (circle at top left) da rgba(255, 255, 255, 0.6) a rgba(255, 255, 255, 0) sovrapposto a un colore crea un alone di luce nell'angolo.
Domande frequenti
In quale direzione va 0deg?
In CSS, 0deg punta verso l'alto, quindi il gradiente inizia dal basso e termina in alto. 90deg va da sinistra a destra. È diverso da alcune app di progettazione, in cui 0° indica spesso la direzione da sinistra a destra.
Posso applicare il gradiente al testo?
Sì: applica lo sfondo, poi aggiungi background-clip: text e color: transparent. Verifica che il testo rimanga leggibile sullo sfondo della pagina in ogni punto del gradiente.
Servono prefissi specifici per i browser, come -webkit-linear-gradient?
No. I browser attuali supportano la sintassi senza prefissi. I prefissi servono solo per browser molto datati.
Privacy
Tutto viene generato nel browser. I colori e le impostazioni non vengono inviati né salvati.