Informazioni: Generatore di gradienti CSS
Un gradiente CSS (sfumatura) fa passare in modo morbido due o più colori usando solo il CSS, senza file immagine. Si usa per pulsanti, banner e sfondi delle card: pesa meno di un’immagine e resta nitido su qualsiasi schermo.
In questo generatore, trascinando la manopola dell’angolo o i punti colore, l’anteprima e il codice linear-gradient, radial-gradient o conic-gradient cambiano insieme.
Come si usa
- Scegli il tipo di gradiente: Lineare, Radiale o Conico.
- Per i gradienti lineari e conici gira la manopola o usa il cursore o il campo numerico per l’angolo. Per quelli radiali scegli la forma e la posizione del centro.
- Trascina i cerchi sulla barra dei colori per spostarli e tocca uno spazio vuoto o + Colore per aggiungerne altri. Nell’elenco sotto puoi anche inserire colore e posizione (%) esatti.
- Quando il risultato ti piace, tocca Copia CSS e incollalo nel tuo foglio di stile.
Tipi di gradiente e sintassi
| Tipo | Codice di esempio |
|---|---|
| Lineare | linear-gradient(90deg, #4f46e5 0%, #22c1c3 100%) |
| Radiale | radial-gradient(circle at center, #fff 0%, #000 100%) |
| Conico | conic-gradient(from 0deg at center, red, yellow, red) |
Nel gradiente lineare 0deg va dal basso verso l’alto (↑), 90deg da sinistra a destra (→) e 180deg dall’alto verso il basso (↓). La percentuale dopo un colore è il punto in cui quel colore appare puro. Mettendo due colori nella stessa posizione si ottiene un bordo netto: è così che si creano le strisce.
Consigli di design
- Due colori complementari molto saturi spesso producono al centro un grigio spento. Usa colori vicini sul cerchio cromatico o aggiungi un colore più chiaro in mezzo.
- Se metti del testo su un gradiente, verifica che sia leggibile sia nella parte più chiara sia in quella più scura. Ti aiuta il controllo del contrasto nel convertitore di colori.
- La prima riga background: colore pieno; è un colore di riserva per browser molto vecchi.
Domande frequenti
Funziona su tutti i browser?
linear-gradient e radial-gradient funzionano senza prefisso -webkit- in tutti i browser moderni. conic-gradient è supportato da Chrome 69, Safari 12.1 e Firefox 83 in poi.
Posso applicare un gradiente al testo?
Sì. Unisci il codice background copiato a background-clip: text; -webkit-background-clip: text; color: transparent; e il testo prenderà la sfumatura.
Quanti colori posso aggiungere?
Questo strumento consente fino a 12 punti colore. Il CSS in sé non ha limiti.