Come creare un gradiente CSS (e copiare codice pulito)

Un colore piatto va bene, ma un gradiente ben dosato è ciò che rende rifinita una sezione hero, un pulsante o una scheda. Il problema è che scrivere a mano la sintassi di un gradiente a memoria è laborioso, e un solo valore sbagliato ti dà una linea netta invece di una sfumatura morbida. Questa guida spiega come funzionano davvero i gradienti CSS e come crearne uno in modo visivo, per poi copiare codice pulito da incollare direttamente nel tuo foglio di stile.

I due gradienti che userai di più

Il CSS ha diversi tipi di gradiente, ma due coprono quasi tutto:

• Il gradiente lineare sfuma i colori lungo una linea retta. Imposti l’angolo (oppure una parola chiave come to right) e i colori scorrono lungo di essa. È la scelta naturale per sfondi, pulsanti e banner.
• Il gradiente radiale sfuma verso l’esterno a partire da un punto centrale, in un cerchio o un’ellisse. È perfetto per riflettori, bagliori e sfondi con un punto focale morbido.

Entrambi sono costruiti a partire da punti di colore (color stops): un elenco di colori e, facoltativamente, la posizione di ciascuno lungo la linea.

Come creare un gradiente nel browser

Il Generatore di gradienti CSS gratuito ti permette di progettarne uno a occhio e ti consegna il codice, così non devi mai indovinare la sintassi.

1. Apri lo strumento e scegli il tipo di gradiente, lineare o radiale.
2. Scegli i tuoi colori e trascina i punti finché la sfumatura non ti convince.
3. Regola l’angolo o la posizione a piacere.
4. Copia il CSS generato e incollalo nel tuo foglio di stile.

Ciò che vedi nell’anteprima dal vivo è esattamente ciò che andrà in produzione, quindi non c’è alcun tentativo a vuoto negli strumenti per sviluppatori del browser in seguito.

Leggere il codice che ottieni

Un semplice gradiente lineare ha questo aspetto:

background: linear-gradient(90deg, #2b59ff, #7c3aed);

Si legge così: sfuma dal blu al viola, da sinistra a destra (90 gradi). Aggiungi un terzo colore o sposta i punti e controlli esattamente dove avviene ogni transizione. Una versione radiale cambia la parola chiave:

background: radial-gradient(circle, #2b59ff, #1a1a2e);

Poiché l’output è semplice CSS, funziona in ogni browser moderno senza librerie e senza alcuna fase di build.

Consigli per gradienti dall’aspetto professionale

• Mantieni le tonalità affini. Le sfumature tra colori vicini (dal blu al viola, dall’arancione al rosa) appaiono morbide. Colori diametralmente opposti possono diventare fangosi nel mezzo.
• Fai attenzione all’angolo. Una leggera diagonale (intorno ai 135 gradi) spesso risulta più naturale di un riempimento piatto dall’alto verso il basso.
• Usalo con intenzione. Un gradiente su un pulsante più uno coordinato sullo sfondo lega insieme un design. Se ti serve un’ombra abbinata, il Generatore di box-shadow CSS ne crea una allo stesso modo.

Ti servono i colori in un altro formato?

I gradienti sono scritti in esadecimale per impostazione predefinita, ma potresti aver bisogno degli stessi colori in RGB o HSL per un design system o un framework. Il Convertitore di colori traduce tra i formati all’istante, così puoi inserire i valori ovunque il tuo progetto li richieda. Abbina un gradiente ad angoli arrotondati del Generatore di border-radius CSS e avrai l’aspetto completo di una scheda moderna in un paio di minuti.

Perché uno strumento nel browser batte il memorizzare la sintassi

Il codice dei gradienti è facile da sbagliare di poco, e un piccolo errore produce un risultato a bande e brutto. Costruirlo in modo visivo significa regolarlo finché non ha l’aspetto giusto e poi copiare un codice che è garantito corrispondere all’anteprima. Tutto avviene nella pagina, sul tuo dispositivo, quindi non c’è alcun account, nessun caricamento e niente da installare.

Per creare un gradiente CSS nel modo più semplice: scegli il tipo, imposta colori e punti, perfeziona l’angolo e copia il codice. Dovrebbe essere gratuito e istantaneo, ed è esattamente lo scopo del Generatore di gradienti CSS.