Generatore di Gradienti CSS
Crea bellissimi gradienti CSS visivamente. Scegli il tipo lineare, radiale o conico, aggiungi fermate di colore, regola l'angolo e ottieni un'anteprima dal vivo. Copia il CSS pronto con un clic.
Stop colore
Anteprima
CSS
Tutto funziona nel tuo browser — nessun dato viene inviato.
Come usare il generatore di gradienti
- Scegli il tipo di gradiente — lineare, radiale o conico.
- Imposta i tuoi colori e posizioni con i selettori di colore e i controlli delle fermate.
- Regola l'angolo (lineare) o la forma (radiale), poi copia il CSS.
Gradienti CSS Spiegati
I gradienti CSS sono resi dal browser usando matematica, non pixel — sono infinitamente scalabili e si caricano istantaneamente.
I gradienti lineari sono i più comuni. Con fermate multiple, puoi creare effetti complessi come cieli di tramonto o gradienti di marca.
I gradienti conici ruotano i colori attorno a un punto centrale — perfetti per grafici a torta, ruote cromatiche e motivi stellari.
Domande Frequenti
Cos'è un gradiente CSS? ▼
Una transizione di colore fluida generata in CSS con linear-gradient(), radial-gradient() o conic-gradient() — senza file immagine.
Differenza tra lineare, radiale e conico? ▼
Lineare: lungo una linea retta. Radiale: da un punto centrale verso l'esterno. Conico: ruotando attorno a un punto centrale.
Come cambio l'angolo di un gradiente lineare? ▼
Usa il campo dell'angolo (0-360°). A 90deg il gradiente va da sinistra a destra; a 180deg dall'alto verso il basso.
Cosa sono le fermate di colore? ▼
Ogni fermata definisce un colore e la sua posizione (0%-100%). Fermate multiple creano gradienti multicolore.
Come creo un gradiente trasparente? ▼
Imposta l'alfa di qualsiasi fermata di colore a 0 usando rgba() o la parola chiave CSS transparent.
Compatibilità con i browser? ▼
Tutti i browser moderni supportano gradienti lineari, radiali e conici senza prefissi del fornitore.
Posso usare gradienti come riempimento di testo? ▼
Sì: imposta il background sul tuo gradiente, poi applica background-clip: text e color: transparent.
Come creo un gradiente ripetitivo? ▼
Usa repeating-linear-gradient() o repeating-radial-gradient() con fermate di colore definite.
Strumenti Correlati
Generatore di Ombre CSS
Progetta ombre box-shadow visivamente con anteprima dal vivo. Regola offset, sfocatura, espansione e colore, poi copia il CSS pronto all'uso istantaneamente.
Generatore di Glassmorfismo
Genera effetti CSS di glassmorfismo con controlli di sfocatura e trasparenza. Anteprima dal vivo e CSS pronto da copiare per design di vetro smerigliato.
Generatore di Triangoli CSS
Crea triangoli CSS puri con la tecnica del border hack. Scegli direzione, dimensione e colore con anteprima e CSS pronto da copiare.