Come creare gradienti CSS

I gradienti CSS permettono di creare transizioni di colore fluide senza file immagine. Sono più leggeri delle immagini, si adattano perfettamente a qualsiasi dimensione di schermo e sono semplici da personalizzare.

Tipi di gradienti CSS

Gradiente lineare — i colori passano in linea retta (alto in basso, sinistra-destra o qualsiasi angolo).

background: linear-gradient(135deg, #667eea, #764ba2);

Gradiente radiale — i colori si irradiano da un punto centrale secondo un pattern circolare o ellittico.

background: radial-gradient(circle, #667eea, #764ba2);

Gradiente conico — i colori ruotano attorno a un punto centrale, come una ruota dei colori.

background: conic-gradient(from 0deg, #667eea, #764ba2, #667eea);

Come creare gradienti visivamente

1. Seleziona il tipo di gradiente — scegli lineare o radiale e regola l'angolo o la posizione.
2. Aggiungi punti di colore — clicca per aggiungere colori a diverse posizioni del gradiente. Regola ogni colore e la sua posizione.
3. Copia il CSS — copia il codice generato e incollalo nel tuo foglio di stile.

Usare un generatore visivo è più rapido che scrivere la sintassi a mano, soprattutto con più punti di colore.

Pattern di gradiente comuni

Sfondo di sezione hero — un gradiente sottile a due colori aggiunge profondità senza distrarre dal testo.

background: linear-gradient(135deg, #0f172a, #1e3a5f);

Evidenziazione di pulsante — un leggero gradiente dà un effetto tridimensionale ai pulsanti.

background: linear-gradient(180deg, #3b82f6, #2563eb);

Velo su immagine — un velo a gradiente migliora la leggibilità del testo su foto.

background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));

Bordo di accento — usa un gradiente come bordo per creare interesse visivo.

border-image: linear-gradient(90deg, #667eea, #764ba2) 1;

Consigli

• Resta sottile — i migliori gradienti si notano appena. Un leggero scivolamento tra due colori simili aggiunge profondità. I gradienti arcobaleno drammatici raramente appaiono professionali.
• Usa gradienti invece di immagini — un gradiente CSS si carica all'istante senza richiesta di rete. Sostituisci le immagini di sfondo decorative con gradienti quando possibile.
• Testa in modalità scura — i gradienti che rendono bene su sfondo chiaro possono sbiadire o stonare in modalità scura. Definisci se necessario gradienti diversi per ogni tema.
• Attenzione al contrasto del testo — se posizioni testo su un gradiente, verifica che resti leggibile su tutta la gamma del gradiente, non solo sulla parte più chiara o più scura.