Come creare gradienti CSS

linear-gradient. Il più comune. Una transizione di colore lungo una linea retta. Puoi controllare la direzione (dall'alto in basso, da sinistra a destra, angolo personalizzato) e aggiungere quanti stop di colore desideri.

radial-gradient. I colori si irradiano da un punto centrale verso l'esterno, in cerchio o ellisse. Perfetto per creare effetti luce, pulsanti luminosi o sfondi sottili.

conic-gradient. I colori ruotano attorno a un punto centrale, come settori di una ruota cromatica. Ideale per grafici circolari, indicatori o effetti arcobaleno.

repeating-linear-gradient / repeating-radial-gradient. Versioni ripetute, perfette per creare pattern a righe o texture.

Colori analoghi. Scegli colori adiacenti sulla ruota cromatica (blu → viola, arancione → rosso). Le transizioni sono naturalmente armoniose e morbide.

Colori complementari. Colori opposti sulla ruota (blu → arancione). Attenzione: la transizione diretta può creare una zona grigiastra al centro. Aggiungi un colore intermedio per evitarlo.

Monocromatico. Variazioni della stessa tonalità (azzurro → blu scuro). Sempre elegante e professionale. Perfetto per sfondi sottili.

Evita transizioni brusche. Più i colori sono distanti sulla ruota, più stop intermedi servono per ammorbidire la transizione.

Consiglio pro: usa lo spazio colore oklch() per transizioni percettivamente uniformi. I gradienti in oklch sono più naturali di quelli in RGB.

Passo 1: Scegli il tipo. Lineare, radiale o conico. Ogni tipo ha le sue opzioni di personalizzazione.

Passo 2: Seleziona i tuoi colori. Usa il selettore colori per scegliere i tuoi stop. Aggiungi, rimuovi o riordina stop con un clic.

Passo 3: Regola direzione e posizioni. Modifica l'angolo, il punto di partenza e la posizione esatta di ogni stop per un controllo totale.

Passo 4: Copia il codice CSS. Il codice CSS viene generato in tempo reale. Copialo e incollalo direttamente nel tuo foglio di stile.

Anteprima live, cronologia gradienti e suggerimenti di palette popolari inclusi.

Sfondi di sezioni. Un gradiente sottile tra due toni vicini aggiunge profondità senza distrarre dal contenuto. L'uso più comune nel web design moderno.

Pulsanti e CTA. Un gradiente rende i pulsanti più dinamici e attraenti di un colore piatto. Aggiungi un leggero cambio di gradiente all'hover per un effetto soddisfacente.

Testo in gradiente. Con background-clip: text, puoi applicare un gradiente direttamente al testo. Molto di tendenza per titoli e loghi.

Overlay su immagini. Un gradiente semitrasparente sopra un'immagine migliora la leggibilità del testo sovrapposto.

Bordi. Border-image con gradiente crea bordi colorati impossibili con border-color classico.

I gradienti CSS sono performanti. A differenza delle immagini, sono vettoriali (nessuna pixelizzazione), leggeri (pochi byte di codice vs KB di immagine) e renderizzati dalla GPU.

Preferisci CSS alle immagini. Un gradiente CSS è sempre più veloce da caricare e più nitido di un'immagine gradiente. Si adatta anche naturalmente a tutte le dimensioni dello schermo.

Limita il numero di stop. Più di 4-5 stop rende il codice complesso e l'anteprima difficile. Per gradienti molto complessi, considera SVG.

Testa su mobile. I gradienti possono apparire diversi su schermi OLED vs LCD. Testa sempre su più tipi di schermo.

Accessibilità. Assicurati che il testo su uno sfondo gradiente resti leggibile in ogni punto. Verifica il contrasto WCAG ad ogni estremità.