Tools Blog

CSS Gradient
Generator

Genera gradienti CSS bellissimi — lineari, radiali o conici — e copia il codice in un istante. Anteprima live mentre regoli colori e angolo.

Lineare · Radiale · ConicoCopia in 1 clicCSS-ready

① Scegli tipo e angolo gradiente ② Scegli due colori ③ Copia il CSS

#FF6B6B
#4ECDC4
CSS generato
background: linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 100%);
Linear

Transizione dei colori lungo una linea retta definita da un angolo (0–360°). 0° va dal basso in alto, 90° da sinistra a destra.

Radial

I colori si irradiano da un punto centrale verso l'esterno in forma ellittica o circolare. Ottimo per effetti spotlight e glow.

Conic

I colori ruotano attorno a un punto centrale come una ruota dei colori. Perfetto per grafici a torta e design angolari.

Come funzionano i gradienti CSS — lineare, radiale e conico

I gradienti CSS sono generati interamente dal browser senza file immagine. Un gradiente lineare mescola i color stop lungo un asse: linear-gradient(). Uno radiale si irradia da un punto focale: radial-gradient(). Uno conico ruota i colori attorno a un punto centrale: conic-gradient(). Tutti e tre si applicano tramite la proprietà background o background-image. Le posizioni degli stop (0%–100%) controllano dove ogni colore inizia e finisce.

Domande frequenti

Un gradiente CSS è una transizione fluida tra due o più colori generata interamente dal browser senza file immagine. Definito tramite le proprietà background o background-image, è indipendente dalla risoluzione e si carica istantaneamente.
Un linear-gradient() mescola i colori lungo una linea retta. La direzione è controllata da un angolo in gradi (0°=dal basso in alto, 90°=da sinistra a destra, 180°=dall'alto in basso). Le posizioni degli stop (%) definiscono dove ogni colore inizia e finisce.
I gradienti lineari mescolano lungo una linea retta. I radiali si irradiano da un punto focale verso l'esterno in forma circolare o ellittica. I conici ruotano i colori attorno a un punto centrale, come una ruota cromatica.
I gradienti si impostano sulla proprietà background o background-image: background: linear-gradient(90deg, #FF6B6B, #4ECDC4). Possono essere sovrapposti e combinati con immagini usando valori separati da virgola.
I gradienti lineari e radiali sono supportati in tutti i browser moderni. I gradienti conici sono supportati da tutti i browser moderni dal 2021. Non sono necessari prefissi vendor per le versioni browser attuali.
Copia il CSS generato e incollalo direttamente nel foglio di stile. In Figma puoi ricreare i gradienti usando il pannello fill. I gradienti funzionano ottimamente per sfondi hero, overlay su card, stati dei pulsanti ed elementi decorativi.
Sì, i gradienti CSS supportano un numero illimitato di stop di colore. Aggiungi più colori separati da virgola con posizioni opzionali: linear-gradient(90deg, red 0%, yellow 50%, blue 100%). Questo tool genera gradienti a due stop per semplicità, ma la sintassi è facilmente estendibile.
Articoli correlati
CSS 14 min lettura
CSS Gradient: la guida completa da linear a conic
Padroneggia tutti e tre i tipi di gradient CSS — linear, radial e conic — con color stop avanzati, angoli, hint e pattern reali come sfondi striati, testo con gradient e mesh gradient.
CSS 6 min lettura
Generatore CSS Gradient: Guida completa ai gradienti lineari e radiali
Padroneggia i gradienti CSS: lineari, radiali e conici. Impara la sintassi, i color stop, gli angoli e le tecniche creative.

Esplora il Nostro Network

ntool.io Strumenti gratuiti di diagnostica di rete — ping, traceroute, DNS lookup, port scanner e altro Visita → capops.io Calcolatori finanziari gratuiti — interesse composto, mutuo, pianificazione pensione, strumenti di investimento e altro Visita →