Generatore Gradienti CSS Online — Gradienti Lineari, Radiali, Conici

Un gradiente lineare crea una transizione di colore fluida lungo una linea retta. Imposta l'angolo da 0° a 360° e aggiungi fino a 10 colori con posizioni individuali.

Syntax:

background: linear-gradient(angle, color1 position%, color2 position%);

Examples:

• linear-gradient(90deg, #667eea 0%, #764ba2 100%)
• linear-gradient(135deg, #f857a6 0%, #ff5858 100%)
• linear-gradient(to right, #ee0979 0%, #ff6a00 100%)

Un gradiente radiale crea una transizione di colore dal centro verso l'esterno in forma di cerchio o ellisse. Configura forma, dimensione e posizione del centro.

Syntax:

background: radial-gradient(shape size at position, color1, color2);

Examples:

• radial-gradient(circle, #667eea 0%, #764ba2 100%)
• radial-gradient(ellipse at center, #f857a6 0%, #ff5858 100%)
• radial-gradient(circle at top left, #ee0979 0%, #ff6a00 100%)

Un gradiente conico crea una transizione di colore attorno a un punto centrale come le lancette di un orologio. Perfetto per ruote di colori e grafici a torta.

Syntax:

background: conic-gradient(from angle at position, color1, color2);

Examples:

• conic-gradient(from 0deg, #667eea, #764ba2, #667eea)
• conic-gradient(from 45deg at center, #f857a6 0%, #ff5858 100%)
• conic-gradient(from 90deg, red, yellow, green, blue, red)

I gradienti CSS sono ampiamente utilizzati nel web design moderno per sfondi, pulsanti, card e altri elementi UI.

• Sezioni hero con sfondi a gradiente
• Pulsanti con gradienti per la conversione
• Card prodotto con gradienti sottili
• Overlay gradiente su immagini
• Gradienti animati per interattività
• Bordi e ombre a gradiente

I gradienti funzionano bene sui dispositivi mobili, creando esperienze visive accattivanti senza file immagine pesanti.

• Barre di stato e pannelli navigazione
• Schermate splash e onboarding
• Barre di progresso con gradiente
• Sfondi per percezione contenuto
• Icone e avatar con gradiente
• Schermate tematiche

I gradienti servono per creare visualizzazioni, grafici e infografiche direttamente nel browser senza editor grafici.

• Mappe di calore con gradienti
• Grafici con settori a gradiente
• Indicatori di progresso
• Grafici a linee con riempimento
• Selettori colore conici
• Pulsanti social branded

Tutti i browser moderni: Chrome, Firefox, Safari, Edge, Opera. Gradienti lineari e radiali dal 2011, conici dal 2017.

Per i browser moderni no. La sintassi standard funziona in tutte le versioni correnti senza -webkit- o -moz-.

Tecnicamente nessun limite, ma 2-5 colori sono consigliati. Il generatore supporta fino a 10 colori.

Tramite angolo (0-360deg) o parole chiave (to top, to right). Il generatore ha uno slider per il controllo preciso.

I gradienti CSS sono molto efficienti, renderizzati dal browser senza richieste HTTP. Molto più leggeri delle immagini di sfondo.

Usa rgba() o hsla() con canale alfa. Es: linear-gradient(90deg, rgba(255,0,0,0.8) 0%, rgba(0,0,255,0.5) 100%)