Generatore di Gradienti CSS – Gradienti Lineari, Radiali e Conici

Come usare Generatore di Gradienti CSS

1Scegli un tipo di gradiente — Lineare, Radiale o Conico — oppure parti da un preset.

2Scegli i colori per i punti e trascina gli slider per impostare la posizione di ciascun colore.

3Imposta l'angolo (o la forma per i gradienti radiali) e aggiungi fino a otto punti.

4Copia il CSS e incollalo nel tuo foglio di stile.

Crea gradienti CSS visivamente

I gradienti aggiungono profondità e colore a pulsanti, sezioni hero, card e sfondi senza bisogno di alcun file immagine. Scriverli a mano, però, significa dover indovinare angoli e percentuali, ricaricando continuamente la pagina. Questo generatore di gradienti CSS ti permette di creare sfumature visivamente con un'anteprima in tempo reale, fornendoti un codice CSS pulito, pronto da copiare e compatibile con tutti i browser moderni.

Funzionalità

Tre tipi di gradiente: lineare, radiale (cerchio o ellisse) e conico.
Fino a otto punti di colore con posizioni trascinabili.
Slider per l'angolo per i gradienti lineari e conici.
Preset e pulsante random per trovare subito l'ispirazione.
Colore di fallback a tinta unita incluso nel CSS.
Copia il codice con un clic.

Come usare il CSS

Incolla il codice nella regola dell'elemento che vuoi stilizzare:

.hero {
  background: #0ea5e9;
  background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
}

In CSS i gradienti sono considerati immagini, quindi puoi usarli anche in background-image, sovrapporne diversi separandoli con una virgola, o combinarli con una foto: background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(photo.jpg); scurisce un'immagine in modo che il testo bianco in primo piano resti leggibile.

Consigli di design

Mantieniti sul sobrio. Due tonalità vicine (dal blu al viola, dall'arancione al rosa) risultano più fluide e moderne rispetto a colori opposti.
Verifica il contrasto. Se il testo si trova sul gradiente, assicurati che sia leggibile su entrambe le estremità — testa i colori con il Convertitore Colori, che mostra i rapporti di contrasto.
Estrai i colori dall'immagine del brand con il Color Picker da Immagine.
Aggiungi profondità a card e pulsanti con il Generatore di Box Shadow.

Domande frequenti

Perché ci sono due righe di background nel CSS?

La prima riga imposta un colore a tinta unita di fallback per i rari browser o client email che non supportano i gradienti. I browser che li supportano usano la seconda riga, che sovrascrive la prima.

Cosa significano gli angoli in un gradiente lineare?

0° va dal basso verso l'alto, 90° da sinistra a destra, 180° dall'alto verso il basso e 270° da destra a sinistra. Gli angoli intermedi si muovono in diagonale: 135° va dall'alto a sinistra verso il basso a destra.

Qual è la differenza tra gradienti lineari, radiali e conici?

Un gradiente lineare cambia colore lungo una linea retta. Un gradiente radiale si espande dal centro verso l'esterno formando un cerchio o un'ellisse. Un gradiente conico ruota attorno al centro come una ruota dei colori o un grafico a torta.

Servono i prefissi vendor come -webkit-?

No. I gradienti lineari e radiali funzionano senza prefissi in tutti i browser attuali, mentre i gradienti conici sono supportati da tutti i browser moderni rilasciati dal 2020 in poi.

Come creo uno stacco netto invece di una sfumatura graduale?

Imposta due stop nella stessa posizione con colori diversi. Ad esempio, rosso al 50% e blu al 50% creano una divisione netta a metà.