Generatore di gradienti CSS (lineare, radiale, conico)
Scegli il tipo di gradiente, imposta l'angolo, aggiungi o rimuovi punti di colore con le posizioni. Anteprima in tempo reale. Copia la dichiarazione CSS background con un clic.
Punti di colore
- 0%
- 100%
Come funziona
I tre tipi di gradiente in CSS
Gradiente lineare: i colori si fondono lungo una linea retta a un angolo dato. 0° punta verso l'alto, 90° punta a destra (direzione di lettura predefinita), 180° punta verso il basso. Il più comune per sfondi, pulsanti e sezioni hero.
Gradiente radiale: i colori si espandono verso l'esterno da un punto centrale. La forma può essere un cerchio (predefinito) o un'ellisse. Ideale per effetti spotlight, elementi simili al sole o elementi centrali che catturano l'attenzione.
Gradiente conico: i colori ruotano attorno a un punto centrale, come una ruota dei colori. Meno comune ma potente per grafici a torta, quadranti di orologi o spinner decorativi. Supportato dai browser moderni dal 2020.
Punti di colore e sistema percentuale
Ogni punto di colore ha un colore e una posizione da 0% a 100%. Lo 0% è l'inizio del gradiente, il 100% è la fine. Due punti creano un gradiente a due colori fluido. Aggiungere un terzo punto nel mezzo crea una miscela a tre colori o una banda netta a seconda del posizionamento.
Per transizioni nette (senza sfumatura), metti due punti nella stessa posizione con colori diversi. Ad esempio, '#000 50%, #fff 50%' crea un netto passaggio dal nero al bianco a metà. È così che si realizzano gli sfondi 'a strisce'.
Prestazioni e consigli sull'accessibilità
I gradienti vengono renderizzati nativamente senza richieste HTTP, a differenza delle immagini di sfondo. Si scalano all'infinito senza perdita di qualità. Sono adatti all'animazione: puoi animare la posizione tramite background-position o animare i punti del gradiente con proprietà personalizzate.
Accessibilità: non mettere testo direttamente sopra un gradiente complesso se il contrasto varia lungo il gradiente. Usa un overlay di colore piatto, assicurati che la luminosità media del gradiente contrasti con il testo, oppure verifica con il nostro controllo del contrasto. WCAG AA richiede 4,5:1 per il testo normale, 3:1 per il testo grande.
Domande frequenti
›I gradienti sono supportati dai browser vecchi?
I gradienti lineari e radiali funzionano in tutti i browser moderni inclusi Edge, Firefox, Chrome, Safari (dal 2014). I gradienti conici richiedono Chrome 69+, Firefox 83+, Safari 12.1+ — per i browser più vecchi, usa un lineare come fallback.
›Posso usarli in React Native o app mobile?
I gradienti CSS web non si traducono direttamente in React Native — usa librerie come `react-native-linear-gradient`. I punti di colore si trasferiscono, ma la sintassi è diversa. Le UI iOS e Android usano API specifiche della piattaforma.
›Posso usare colori con nome?
Sì. Sostituisci qualsiasi codice esadecimale (es. #ff0000) con il nome del colore CSS (red, dodgerblue, ecc.) nel campo di testo accanto al selettore di colore.
›Perché il mio gradiente conico sembra strano?
I gradienti conici ruotano in senso orario dall'angolo impostato. Sembrano migliori con più punti che coprono l'intera rotazione di 360°. Con solo 2 punti appaiono spesso incompleti.
›Come creo un effetto 'bagliore'?
Usa un gradiente radiale con un punto finale completamente trasparente: es. 'radial-gradient(circle, rgba(255,200,0,0.6) 0%, transparent 70%)'.
›Posso animare il gradiente?
CSS non anima direttamente i punti del gradiente, ma puoi animare background-position per un effetto in movimento, oppure usare proprietà personalizzate CSS (variabili) e aggiornarle con JavaScript.
›Perché il CSS è così lungo?
Ogni punto aggiunge un colore e una posizione. I gradienti con molti punti producono CSS verboso. Per risultati più semplici, usa 2-3 punti.
›I dati escono dal mio browser?
No. Tutto viene calcolato localmente; nulla viene inviato a un server.
Strumenti correlati
Ultimo aggiornamento: