IT

Generatore di gradienti CSS

Scegli il tipo di gradiente, la direzione e i colori. Imposta ogni punto colore con selettore e cursore e aggiungine altri con «+ Punto colore». Il generatore scrive il gradiente in CSS valido e compatto e aggiunge un background-color pieno di riserva, così il testo resta leggibile anche senza gradiente.

Disegna il gradiente

background-color: #675BF0;
background-image: linear-gradient(90deg, #3B82F6 0%, #9333EA 100%);
°
0° = verso l’alto, 90° = verso destra, 180° = verso il basso (predefinito)
Un punto per riga: un colore e una posizione facoltativa in %, per es. #3B82F6 0%
Lascia vuoto per usare la media dei colori del gradiente
I dati inseriti vengono salvati solo in questo browser.

Risultato

Dichiarazione CSS
background-color: #675BF0; background-image: linear-gradient(90deg, #3B82F6 0%, #9333EA 100%);
Solo il gradiente (per background-image)
linear-gradient(90deg, #3B82F6 0%, #9333EA 100%)
Colore di riserva (background-color)
#675BF0
Punti colore con posizioni calcolate
N.ColorePosizione indicataPosizione usata
1#3B82F60 %0 %
2#9333EA100 %100 %

Come si calcola

Tre tipi di gradiente

FunzioneAndamentoPredefinito (se omesso)
linear-gradient()lungo una retta con l’angolo scelto180deg = dall’alto verso il basso
radial-gradient()dal centro verso l’esternoellisse, centrata, fino all’angolo più lontano
conic-gradient()intorno al centro, come un grafico a tortada 0deg (in alto), in senso orario

Nel gradiente lineare l’angolo indica la direzione: 0deg punta in alto, 90deg a destra, 180deg in basso. «Ripeti» genera repeating-linear-gradient() e simili: il motivo tra il primo e l’ultimo punto si ripete – ideale per le strisce.

Punti colore e posizioni mancanti

Le posizioni sono facoltative. Se mancano, vale la specifica W3C (CSS Images, «Coloring the Gradient Line»): il primo punto sta a 0%, l’ultimo a 100% e i punti intermedi senza posizione vengono distribuiti in modo uniforme. Se una posizione è minore di una precedente, viene alzata a quel valore – così si ottengono bordi netti. Due posizioni di fila (red 0% 50%) creano una fascia a tinta unita. La tabella mostra la posizione che il browser usa davvero per ogni punto.

Perché un colore di riserva?

I gradienti sono immagini. Se l’immagine non viene disegnata – per esempio in modalità a colori forzati o per un errore di battitura nel valore – resta solo background-color. Il generatore usa la media dei colori pesata sull’area.

Esempio linear-gradient(90deg, #3B82F6 0%, #9333EA 100%): ogni colore copre metà della linea. Rosso (59 + 147) ÷ 2 = 103, verde (130 + 51) ÷ 2 = 90,5 ≈ 91, blu (246 + 234) ÷ 2 = 240 – colore di riserva #675BF0. Verifica il contrasto del testo con questo colore e con le parti più chiare e più scure del gradiente.

Domande frequenti

Come si crea un gradiente in CSS?

Con background-image: linear-gradient(90deg, #3B82F6, #9333EA); – oppure con la scorciatoia background. Metti prima un background-color come riserva. Il generatore ti dà entrambe le righe pronte da copiare.

Come ottengo bordi netti invece di passaggi sfumati?

Dai a due punti la stessa posizione, per es. red 50%, blue 50%, oppure dai a un colore due posizioni: red 0% 50%, blue 50% 100%. Attiva «Ripeti» per ottenere delle strisce.

conic-gradient funziona in tutti i browser?

In tutti i browser attuali sì (Chrome ed Edge dalla versione 69, Firefox dalla 83, Safari dalla 12.1). Nei browser molto vecchi il colore di riserva evita che l’area resti vuota.

Posso usare colori trasparenti?

Sì. Inserisci un punto come rgba() o come valore HEX a 8 cifre, per es. rgba(0, 0, 0, 0.5). L’anteprima mostra la trasparenza su una scacchiera. Il colore di riserva è sempre pieno.

Fonti e riferimenti normativi

Aggiornato al:

Strumenti correlati