Generatore di gradienti CSS

Cos'è un generatore di gradienti CSS?

Un generatore di gradienti CSS è un editor visuale per le funzioni linear-gradient, radial-gradient e conic-gradient del CSS. Ti evita di scrivere a mano i punti colore: trascini i colori su una barra, guardi l'anteprima aggiornarsi e copi CSS pronto per la produzione da incollare direttamente nel tuo foglio di stile.

I gradienti sono ovunque nelle interfacce moderne: sezioni hero, sovrapposizioni sulle card, stati dei pulsanti, effetti di bagliore, sfumature discrete in modalità scura, skeleton di caricamento e bordi decorativi. Saper leggere e scrivere un gradiente a mano ti rende più veloce, ma per abbozzare idee un generatore visuale è imbattibile.

Il CSS supporta tre tipi di gradiente. Il *lineare* segue una linea retta con qualsiasi angolo. Il *radiale* si irradia da un punto in un cerchio o in un'ellisse. Il *conico* fa ruotare i colori attorno a un punto centrale come il quadrante di un orologio. Ognuno ha i suoi casi d'uso, e puoi combinare più gradienti su un unico sfondo.

Cosa imparerai progettando gradienti

• Un gradiente è definito da una *direzione* (o forma) e da dei *punti colore*: colori con una posizione facoltativa.
• Due punti colore nella stessa posizione creano un *bordo netto*, utile per strisce o sfondi divisi.
• Gli spazi colore moderni come oklch producono gradienti più morbidi e percettivamente più uniformi di rgb o hsl.
• In CSS i gradienti sono immagini: puoi usarli ovunque background-image, border-image, mask-image o filter accettino un'immagine.

Come creare un gradiente CSS passo dopo passo

1. 1

   Scegli un tipo di gradiente

   Scegli lineare per una sfumatura in linea retta, radiale per una dissolvenza circolare o conico per una rotazione attorno a un punto centrale.

2. 2

   Imposta l'angolo o la posizione

   Per il lineare, scegli un angolo in gradi (in CSS 0deg va dal basso verso l'alto). Per radiale e conico, imposta la posizione del centro.

3. 3

   Aggiungi e disponi i punti colore

   Aggiungi tutti i colori che vuoi. Trascina ogni punto lungo la barra per spostarne la posizione. Due punti nella stessa posizione creano un bordo netto.

4. 4

   Guarda l'anteprima su una forma reale

   Passa da una hero a tutta larghezza a una card e a un pulsante per vedere come appare il gradiente con proporzioni diverse.

5. 5

   Copia il CSS

   Copia la dichiarazione background pronta per la produzione e incollala nel tuo foglio di stile.

Gradienti CSS in breve

Le tre funzioni di gradiente e le parti che vanno al loro interno. Riferimento completo su MDN: linear-gradient, radial-gradient, conic-gradient.

Esempi di gradienti CSS da provare

.hero {  background: linear-gradient(135deg, #6c8cff 0%, #b18cff 100%);}

.card {  background:    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.15), transparent 40%),    #1f2230;}

.stripes {  background: repeating-linear-gradient(    45deg,    #1a1a1a 0 12px,    #2a2a2a 12px 24px  );}

Errori comuni con i gradienti CSS

• Usare troppi punti colore: tre o quattro di solito bastano; di più spesso rendono il risultato confuso.
• Dimenticare che nei gradienti CSS 0deg va dal basso verso l'alto (a differenza di molti strumenti di design in cui 0° punta a destra).
• Mettere del testo su un gradiente ad alto contrasto senza controllarne la leggibilità su entrambe le estremità: tieni a mente il contrasto WCAG.
• Animare direttamente background-image. La maggior parte dei browser non interpola i gradienti in modo fluido: anima invece background-position o usa una transizione su una variabile condivisa.
• Stendere un gradiente su elementi molto larghi senza pensare al banding. Aggiungi punti intermedi o usa oklch per transizioni più morbide.

FAQ sui gradienti CSS