CodeKitHubChe cos'è questo strumento?
I gradienti CSS sono immagini generate dal browser a partire da un elenco di colori, non file che carichi: linear-gradient() fa transitare i colori lungo una linea retta a un angolo specifico, mentre radial-gradient() li fa transitare verso l'esterno a partire da un punto centrale. Entrambi accettano due o più punti colore, ciascuno eventualmente ancorato a una posizione lungo il gradiente.
Scritti a mano, i gradienti sono facili da sbagliare in modo sottile: ordine dei punti, percentuali mancanti o un valore dell'angolo nella direzione sbagliata (gli angoli CSS ruotano in senso orario a partire da 'to top', diversamente dagli angoli matematici). Questo strumento tiene la sintassi fuori dai piedi: imposta colori e posizioni con selettori e cursori, osserva l'anteprima aggiornarsi in tempo reale e copia il CSS risultante quando ti sembra corretto.
Fonte: CSS Images Module Level 3, W3C — la specifica che definisce la sintassi di linear-gradient() e radial-gradient().
Perché usarlo?
- L'anteprima in tempo reale si aggiorna istantaneamente a ogni modifica di colore, posizione e angolo: non serve ricaricare la pagina per vedere il risultato.
- Passa da gradiente lineare a radiale con un clic; il controllo dell'angolo si nasconde automaticamente per i gradienti radiali, dove non si applica.
- Aggiungi o rimuovi punti colore (da 2 a 4) invece di essere limitato a un gradiente fisso a due colori.
- Ogni punto ha il proprio cursore di posizione, quindi i punti non devono essere distribuiti in modo uniforme.
- Genera codice CSS pronto da incollare, con la sintassi standard linear-gradient()/radial-gradient().
- Funziona interamente nel tuo browser: nessuna delle impostazioni configurate viene caricata da nessuna parte. Gratuito, senza registrazione, funziona su mobile.
Come si usa
- Scegli Lineare o Radiale come tipo di gradiente.
- Per un gradiente lineare, trascina il cursore dell'angolo: 90deg va da sinistra a destra, 180deg dall'alto verso il basso, e così via.
- Imposta il colore e la posizione per ogni punto; il primo punto è il colore iniziale del gradiente, l'ultimo è il colore finale.
- Clicca '+ Aggiungi punto' per aggiungere fino a 4 punti totali per un gradiente multicolore, oppure il pulsante ✕ per rimuoverne uno (minimo 2).
- Copia il CSS generato e incollalo in una dichiarazione background o background-image.
Esempio
Input
Linear · Angle: 90deg · Stops: #f97316 at 0%, #ec4899 at 100%Risultato
background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);Un gradiente da sinistra a destra dall'arancione al rosa: uno stile comune per pulsanti, banner e sfondi hero.
Gradienti lineari vs. radiali
Un gradiente lineare fa transitare il colore lungo una linea retta, controllata da un angolo: utile per banner, pulsanti e sfondi direzionali. Un gradiente radiale fa transitare il colore verso l'esterno da un punto centrale in anelli in espansione, adatto a effetti spotlight, badge o sfondi luminosi. Questo strumento imposta di default il gradiente radiale con forma circolare centrata nel riquadro, coprendo il caso d'uso radiale più comune; il CSS supporta anche forme ellittiche e posizioni fuori centro, se vuoi modificare ulteriormente il codice a mano.
Modelli comuni di gradiente
- Accento di brand discreto: due tonalità vicine (ad esempio due sfumature dello stesso colore) a un angolo poco marcato, per uno sfondo tenue.
- Pulsante CTA ad alto contrasto: due colori saturi e complementari a 90deg o 135deg per un look audace e cliccabile.
- Overlay su un'immagine: un gradiente da trasparente a un colore pieno (imposta l'opacità tramite un colore rgba nell'esadecimale sottostante del selettore, o regolala dopo la copia) sovrapposto a un background-image.
- Gradiente multi-punto arcobaleno/brand: 3-4 punti distribuiti sull'intero intervallo 0-100%, per transizioni più graduali di quelle possibili con un gradiente a due colori.
- Spotlight radiale: un punto centrale luminoso vicino allo 0% che sfuma verso un bordo più scuro vicino al 100%, utile per sezioni hero o evidenziazioni di schede.
Abbinamento con altri strumenti CSS
I gradienti sono spesso combinati con angoli arrotondati e ombre sullo stesso elemento: una scheda con gradiente, un box-shadow morbido e angoli arrotondati è un pattern UI comune. Genera ogni parte separatamente e combina le dichiarazioni CSS sull'elemento.
→ Generatore di ombreggiatura dei riquadri · Generatore di raggio di bordo · Selettore di colori
Domande frequenti
Qual è la differenza tra linear-gradient() e radial-gradient()?
linear-gradient() fa transitare i colori lungo una linea retta a un angolo specificato. radial-gradient() fa transitare i colori verso l'esterno da un punto centrale in forme espanse (cerchio o ellisse). Entrambi accettano lo stesso tipo di elenco di punti colore separati da virgole; cambia solo la forma della transizione.
Come funzionano gli angoli dei gradienti CSS?
Gli angoli dei gradienti CSS ruotano in senso orario a partire da 'to top' (0deg verso l'alto). 90deg punta a destra, 180deg verso il basso e 270deg a sinistra: la convenzione opposta rispetto agli angoli matematici standard, fonte comune di confusione quando si scrivono gradienti a mano.
Posso usare più di 4 punti colore?
Sì: i gradienti CSS accettano qualsiasi numero di punti colore separati da virgole. Questo strumento limita il costruttore interattivo a 4 per mantenere l'interfaccia gestibile, ma puoi copiare il CSS generato e aggiungere manualmente altre voci 'colore posizione%' separate da virgole nel tuo foglio di stile.
Perché il mio gradiente appare a bande invece che uniforme?
Le bande derivano solitamente da colori troppo distanti in tonalità con troppo pochi punti intermedi, oppure dalla precisione cromatica limitata del browser a contrasto molto basso. Aggiungere un punto intermedio con un colore misto, o scegliere colori più vicini in tonalità, produce generalmente un risultato più uniforme.
Posso animare un gradiente CSS?
Non direttamente: i gradienti non sono animabili nativamente come background-position o transform, poiché i browser non possono interpolare tra due definizioni di gradiente arbitrarie. Soluzioni comuni includono animare background-position su un gradiente sovradimensionato, oppure fare la transizione di background-color se cambia un solo colore.