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 Dati Falsi
Genera dati di test realistici in secondi — nomi, email, telefoni, indirizzi, UUID, Lorem Ipsum e altro. Scegli la quantità (1-100), seleziona i campi, copia come JSON o CSV.
Costruttore di Prompt Midjourney
Crea prompt Midjourney ottimizzati in secondi. Seleziona soggetto, stile artistico, mezzo, illuminazione, palette e parametri. Copia direttamente per Midjourney, DALL-E o Stable Diffusion.
Generatore di QR Code
Genera QR code per URL, password WiFi, indirizzi email, contatti vCard o testo. Scegli dimensione e livello di correzione errori, poi scarica in PNG. Gratis, istantaneo, senza registrazione.