Generatore di gradienti
Generatore online gratuito di gradienti CSS. Crea gradienti lineari, radiali e conici con anteprima in tempo reale. Copia il codice CSS istantaneamente.
Crea gradienti CSS bellissimi visivamente — lineari, radiali e conici con personalizzazione completa.
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);Generatore di Gradienti CSS Gratuito — Crea Gradienti Lineari, Radiali e Conici
Progetta gradienti CSS belli utilizzando questo generatore online gratuito di gradienti. Scegli tra gradienti lineari, radiali e conici, personalizza colori e angoli e copia immediatamente il codice CSS.
Cosa è un gradiente CSS?
Un gradiente CSS è una transizione fluida tra due o più colori, creata utilizzando la proprietà background in CSS. I gradienti eliminano la necessità di file immagine, riducendo i tempi di caricamento delle pagine e permettendo sfondi completamente reattivi e indipendenti dalla risoluzione.
Ci sono tre tipi principali di gradienti CSS:
- Gradienti lineari trasformano i colori lungo una linea retta, definita da un angolo o una direzione.
- Gradienti radiali si irradiano all'esterno da un punto centrale, creando pattern circolari o ellittici.
- Gradienti conici trasformano i colori intorno a un punto centrale in un'ampia scansione rotazionale, simile a una ruota dei colori.
Come Utilizzare Questo Generatore di Gradienti
- Scegli il tipo di gradiente — Seleziona Lineare, Radiale o Conico in alto nel pannello di controllo.
- Imposta la direzione — Per i gradienti lineari e conici, regola l'angolo utilizzando lo slider o i pulsanti di selezione rapida.
- Personalizza le opzioni radiali — Per i gradienti radiali, scegli una forma (cerchio o ellisse) e una parola chiave per la dimensione.
- Modifica gli stop di colore — Clicca sul selettore di colore per cambiare il colore di ogni stop. Trascina lo slider di posizione per regolare dove appare ogni colore.
- Aggiungi o rimuovi colori — Utilizza il pulsante "Aggiungi Colore" per aggiungere più stop (fino a 8), o clicca su X per rimuovere un stop (minimo 2).
- Prova un preset — Clicca su qualsiasi campione di preset per caricare un gradiente predefinito.
- Copia il CSS — Clicca su "Copia CSS" per copiare la proprietà
backgroundcompleta nel tuo clipboard.
Funzionalità Principali
| Funzione | Vantaggio |
|---|---|
| Tre tipi di gradienti | Lineare, radiale e conico — tutti i modi CSS per i gradienti supportati |
| Anteprima in tempo reale | Vedi il tuo gradiente aggiornarsi in tempo reale mentre modifichi le impostazioni |
| Fino a 8 stop di colore | Crea gradienti multicolore complessi con posizionamento preciso |
| Controllo dell'angolo | Slider + pulsanti di selezione rapida per angoli comuni (0°–315°) |
| Forma e dimensione radiale | Forme cerchio/ellisse con quattro parole chiave CSS per le dimensioni |
| Preset in un clic | Sei gradienti predefiniti curati per iniziare velocemente |
| Copia il codice CSS | Un clic per copiare il codice CSS pronto per la produzione nel tuo clipboard |
| Nessun dato inviato | Tutto funziona nel tuo browser — nessun server, nessuna tracciabilità |
Confronto dei Tipi di Gradienti
| Proprietà | Lineare | Radiale | Conico |
|---|---|---|---|
| Direzione | Angolo (0–360°) | Forma + parola chiave per le dimensioni | Angolo iniziale |
| Pattern | Linea retta | Cerchio o ellisse dal centro | Scansione rotazionale |
| Migliore per | Sfondi, banner, pulsanti | Luci, orb, arte astratta | Grafici a torta, ruote dei colori, orologi |
| Funzione CSS | linear-gradient() |
radial-gradient() |
conic-gradient() |
Caso d'uso Reale
Fondi del sito web
Sostituisci i colori piatti con gradienti sottili per pagine moderne e professionali. Un gradiente lineare di 135° con due colori simili aggiunge profondità senza distrazione.
Pulsanti e CTA
Fai spiccare i pulsanti CTA con gradienti vivaci. Utilizza un gradiente di 180° (dall'alto verso il basso) per un effetto naturale di luce a ombra.
Sezioni Hero
Crea banner hero accattivanti con gradienti multicolore audaci. Combina tre o più colori per un look unico del marchio.
Sovrapposizioni e Carte
Applica gradienti semitrasparenti sugli immagini per garantire la leggibilità del testo mantenendo l'interesse visivo.
Visualizzazione dei dati
Utilizza gradienti conici per creare semplici grafici a torta, anelli di progresso o ruote dei colori senza JavaScript o SVG.
Consigli per Gradienti Migliori
- Limitati a 2–3 colori per progetti puliti e professionali. Più stop possono funzionare ma richiedono un'accurata regolazione.
- Usa tinte simili per gradienti sottili (es. blu chiaro a blu scuro) e colori complementari per gradienti audaci.
- Abbinare l'angolo al layout — 180° funziona bene per sezioni verticali, 90° per barre orizzontali.
- Testa su temi scuri e chiari — Un gradiente che sembra bello su uno sfondo bianco potrebbe richiedere un aggiustamento per il dark mode.
- Utilizza
background-sizeebackground-repeatper tassellare piccoli gradienti in pattern. - Combina con la trasparenza — Usa valori
rgba()per creare gradienti che si fondono con il contenuto sottostante.
Comprensione della Sintassi del Gradiente CSS
Un gradiente lineare di base:
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Un gradiente radiale con forma e dimensione:
background: radial-gradient(circle farthest-corner, #667eea 0%, #764ba2 10线);
Un gradiente conico:
background: conic-gradient(from 0deg, #667eea 0%, #764ba2 50%, #667eea 100%);
Tutti i browser moderni supportano questi tipi di gradienti senza prefissi del vendor.
Domande Frequenti
Quanti colori posso usare in un gradiente CSS?
CSS supporta qualsiasi numero di stop di colore. Questo strumento consente fino a 8 per un uso pratico. Nei progetti reali, sono più comuni 2–4 stop.
Qual è la differenza tra gradienti lineari e radiali?
I gradienti lineari trasformano i colori lungo una linea retta a un angolo specificato. I gradienti radiali trasformano i colori all'esterno da un punto centrale in una forma circolare o ellittica.
I gradienti CSS funzionano in tutti i browser?
Sì. Tutti i browser moderni (Chrome, Firefox, Safari, Edge) supportano pienamente linear-gradient, radial-gradient e conic-gradient senza prefissi del vendor.
Posso animare i gradienti CSS?
CSS non può animare direttamente tra valori di gradienti utilizzando transizioni. Tuttavia, puoi animare la posizione del gradiente utilizzando background-position o utilizzare la proprietà CSS @property per animazioni di proprietà personalizzate nei browser supportati.
Come creo un gradiente trasparente?
Utilizza valori rgba() o hsla() con un canale alpha. Per esempio, rgba(102, 126, 234, 0.5) ti dà una versione semitrasparente del colore.
Questo strumento memorizza i miei dati dei gradienti?
No. La generazione dei gradienti avviene interamente nel tuo browser. Nessun dato viene inviato a qualsiasi server.