Generatore di gradienti CSS
Crea un gradiente e copia il codice CSS pronto all’uso.
- Istantaneo
- Gratis
- Privato (elaborato localmente)
- Senza registrazione
Crea il gradiente perfetto senza scrivere una riga di CSS
I gradienti sono ovunque nel design moderno: sfondi hero, pulsanti, card, testi decorativi. Questo generatore ti permette di comporli visivamente — colori, posizioni, angolo, tipo — e di copiare un codice CSS pulito e pronto per la produzione.
-
Scegli il tipo
Lineare per una transizione direzionale, radiale per un alone centrale, conico per effetti a ruota o a torta.
-
Regola colori e posizioni
Cambia ogni colore con il selettore, sposta la posizione con il cursore, aggiungi fino a 6 stop. Il pulsante Casuale suggerisce combinazioni armoniose.
-
Copia il CSS
Il codice si aggiorna in tempo reale. Un clic ed è negli appunti.
Tre funzioni, tre geometrie
| Funzione | Geometria | Uso tipico |
|---|---|---|
| linear-gradient(angolo, …) | Retta orientata | Sfondi, pulsanti, overlay |
| radial-gradient(circle, …) | Cerchi concentrici | Aloni, riflettori, vignettature |
| conic-gradient(from angolo, …) | Rotazione attorno al centro | Grafici a torta, ruote cromatiche, bordi animati |
Consigli per gradienti riusciti
- Resta su tinte vicine (analoghe) per un risultato morbido; le tinte opposte attraversano zone grigie spente.
- Per testo sfumato, combina background-clip: text con color: transparent.
- Su superfici ampie, aggiungi un leggero rumore per evitare bande visibili (banding).
- Cura il contrasto: un testo su gradiente deve restare leggibile su tutta la gamma di colori.
Il codice generato usa colori esadecimali per la massima compatibilità. Nel tuo progetto puoi sostituirli con variabili CSS (var(--mio-colore)).
Domande frequenti
Qual è la differenza tra linear, radial e conic?
linear-gradient procede in linea retta secondo un angolo; radial-gradient si irradia dal centro verso l’esterno; conic-gradient ruota attorno al centro come una ruota cromatica. Tutti e tre accettano le stesse liste di colori.
Quanti colori posso usare?
Lo strumento gestisce fino a 6 stop, che coprono quasi ogni esigenza. In CSS puro il numero è illimitato, ma oltre 4 o 5 colori un gradiente diventa presto difficile da controllare.
Cosa significano le percentuali accanto ai colori?
È la posizione dello stop lungo l’asse del gradiente: 0 % all’inizio, 100 % alla fine. Due stop vicini creano una transizione netta, due lontani una sfumatura graduale.
Il codice generato funziona su tutti i browser?
linear-gradient e radial-gradient sono supportati ovunque da anni. conic-gradient è disponibile in tutti i browser moderni (Chrome 69+, Firefox 83+, Safari 12.1+).
Come si anima un gradiente CSS?
I gradienti non si animano direttamente, ma due tecniche funzionano bene: animare background-position su un gradiente sovradimensionato (background-size: 200 %) oppure animare i colori tramite proprietà personalizzate registrate con @property.