Generatore di sfondi sfumati gratuito

Informazioni sui gradienti

I gradienti CSS permettono di creare transizioni di colore fluide senza immagini, riducendo le dimensioni dei file e migliorando le prestazioni. Questo strumento genera sia file PNG da usare come sfondi sia codice CSS riutilizzabile su un sito.

Domande frequenti

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

I gradienti lineari scorrono in linea retta secondo un angolo specificato. I gradienti radiali si irradiano da un punto centrale. I gradienti conici ruotano attorno a un punto centrale come una ruota dei colori. Ognuno produce un effetto visivo diverso.

Posso usare i gradienti CSS sul mio sito?

Sì! I gradienti CSS sono supportati da tutti i browser moderni e non richiedono immagini. Si adattano a tutte le dimensioni, si caricano più velocemente e restano nitidi su qualsiasi schermo. Copia il CSS generato da questo strumento nei tuoi fogli di stile.

Quali sono le migliori risoluzioni in base al mio dispositivo?

I monitor desktop usano generalmente 1920×1080, i portatili variano, gli schermi 4K usano 3840×2160, gli iPhone 1080×1920 e gli iPad 2048×2732. Scegli la risoluzione che corrisponde al tuo dispositivo per uno sfondo perfettamente nitido.

I gradienti sul web, una breve storia

I gradienti hanno una lunga storia pre-digitale nella stampa e nell'aerografo. Il vocabolario di «gradiente» come rampa morbida da un colore a un altro viene direttamente dalla cromolitografia e dall'arte dei poster ad aerografo della fine del diciannovesimo secolo; gli studenti di design del Bauhaus si esercitavano con esercizi di rampa tonale negli anni '20 molto prima che un qualsiasi pixel ne spingesse uno su uno schermo.

I gradienti digitali arrivarono in due momenti adiacenti all'inizio degli anni '90. Adobe Photoshop 1.0 (febbraio 1990) distribuì uno strumento gradiente fin dal primo giorno, un algoritmo «blend» che interpola tra i campioni di primo piano e di sfondo con un decadimento lineare e radiale. Adobe PostScript Level 2 (1991) introdusse i motivi di sfumatura come funzionalità di prima classe del linguaggio; fino ad allora, PostScript Level 1 non aveva modo di descrivere nativamente un gradiente e doveva essere simulato con riempimenti a bande di grigi incrementali. PostScript Level 3 (1997) aggiunse le sfumature mesh di Tipo 6 (patch di Coons) e Tipo 7 (prodotto tensoriale) che hanno alimentato ogni gradiente stampato nell'industria delle riviste della fine degli anni '90. Lo strumento gradiente mesh di Adobe Illustrator seguì nella versione 8 (1998).

I gradienti CSS sul web arrivarono più tardi di quanto la gente ricordi. Il -webkit-gradient() di WebKit fu distribuito in Safari 4 e Chrome 1 nel 2008 con una sintassi prolissa tutta sua. Il -moz-linear-gradient() di Mozilla seguì in Firefox 3.6 (gennaio 2010), usando la sintassi che alla fine sarebbe diventata standard. I linear-gradient() e radial-gradient() senza prefisso raggiunsero la W3C Candidate Recommendation nell'aprile 2012 ed erano ampiamente utilizzabili da circa il 2013. conic-gradient() è molto più recente, Chrome 69 nel settembre 2018 (dietro un flag), senza flag in Chrome 75 (giugno 2019), Firefox 83 (novembre 2020). Ora è disponibile come Baseline in ogni browser moderno.

Skeuomorfico, poi flat, poi di nuovo gradiente

I gradienti divennero il linguaggio visivo del web design della fine degli anni '90 e dei primi anni 2000, i pulsanti Web 2.0 vetrosi, smussati e riflettenti dell'interfaccia Apple Aqua (2000) erano essenzialmente gradienti annidati con una netta luce interna sopra una morbida dissolvenza del corpo. Il movimento del design flat si cristallizzò attorno al Metro di Microsoft (Windows Phone 7, 2010) e all'iOS 7 di Apple (2013), reagendo allo skeuomorfismo ricco di gradienti spogliando l'interfaccia di ogni ombra, smusso e fusione. Per circa cinque anni (2013-2018), i gradienti furono fuori moda.

Il pendolo tornò indietro con forza dal 2017 in poi. Il gradiente mesh animato multicolore di Stripe sulla sua homepage stabilì un modello che l'intera industria SaaS copiò. Il rebranding del logo di Instagram del 2016 sostituì una fotocamera piatta con un saturo gradiente rosa-arancio-viola (un'eco deliberata dei loghi fotografici degli anni '80). Entro la fine del decennio, i gradienti erano di nuovo onnipresenti, ma con un nuovo vocabolario: mesh, blob sfocati, levigati con OKLCH, attenti all'accessibilità. Tailwind CSS 4 (gennaio 2025) distribuì un insieme curato di utility di gradiente predefinite, compresi i gradienti conici con suggerimenti di interpolazione della tinta.

La sintassi dei gradienti CSS in una schermata

Tutte e tre le funzioni di gradiente CSS prendono un elenco di stop di colore e una direzione:

• linear-gradient(angle, colors…): l'angolo in CSS usa la convenzione del rilevamento a bussola: 0deg punta in alto (primo colore in basso), 90deg punta a destra, 180deg punta in basso (il valore predefinito), 270deg punta a sinistra. Nota che questo è l'opposto dell'angolo polare matematico. Puoi anche usare le parole chiave: to top right calcola l'angolo così che la linea del gradiente passi per la diagonale, non lo stesso di un gradiente di 135° su un riquadro non quadrato.
• radial-gradient(shape size at position, colors…): i colori si irradiano verso l'esterno da un punto centrale. circle o ellipse; parole chiave di dimensione closest-side, farthest-corner; la posizione predefinita è il centro.
• conic-gradient(from angle at position, colors…): i colori ruotano in senso orario attorno a un centro, come una ruota dei colori. Utile per i grafici a torta, gli effetti di spazzata e quell'aspetto da «grafico a ciambella». Le varianti ripetute di tutte e tre (repeating-linear-gradient, ecc.) ripetono a piastrelle gli stop di colore all'infinito.

Gli stop netti (collocare due stop di colore alla stessa percentuale) creano bande nette anziché fusioni morbide: linear-gradient(red 0%, red 50%, blue 50%, blue 100%) è una divisione a due colori, non un gradiente. Utile per le righe, le schede con colore di sezione o i pseudo-bordi.

La rivoluzione OKLCH e il punto intermedio grigio fangoso

Un gradiente dal rosso puro #ff0000 al verde puro #00ff00 nell'interpolazione sRGB predefinita passa attraverso un giallo-marrone desaturato e fangoso attorno a #7f7f00. Questo accade perché l'interpolazione lineare sRGB riduce sia il canale R sia il canale G nel punto intermedio, e i nostri occhi percepiscono il punto intermedio come molto più scuro e meno saturo di entrambi gli estremi. Il classico punto dolente del web design.

Il CSS Color Module Level 4 ha aggiunto spazi colore percettivamente uniformi e la capacità di interpolare i gradienti al loro interno: linear-gradient(in oklch, red, green). OKLCH (e il suo affine OKLab), progettato da Björn Ottosson nel dicembre 2020, separa luminosità, croma e tinta così che interpolare lungo l'asse della tinta prenda la via breve attorno alla ruota dei colori, preservando la saturazione per tutto il percorso. Lo stesso gradiente dal rosso al verde in OKLCH passa attraverso un giallo vivace nel punto intermedio.

La regola generale:

• Due tinte analoghe (rosso ad arancione, blu a viola), sRGB e OKLCH appaiono simili; di solito va bene.
• Due tinte complementari (rosso a verde, blu ad arancione)) sRGB produce un grigio fangoso, OKLCH produce una vivace spazzata di tinta. OKLCH vince in modo decisivo.
• Un colore al bianco o al nero: sRGB appare sporco nel punto intermedio; OKLCH mantiene la luminosità percepita che cambia in modo morbido.
• Due colori desaturati di luminosità simile: differenza minima.

Supporto dei browser: interpolation-method per i gradienti fu distribuito in Safari 16.2 (dicembre 2022), Chrome 111 (marzo 2023) e Firefox 113 (maggio 2023), ora Baseline Widely Available.

Preset di risoluzione) scegli il conteggio di pixel giusto

Uno sfondo più piccolo dello schermo viene stirato e appare sfocato; uno molto più grande spreca dimensione del file e memoria. Obiettivi comuni nel 2026:

Risoluzione	Nome comune	Dove
1920×1080	Full HD / 1080p	Il laptop e il desktop più comuni nel 2026
2560×1440	QHD / 2K	Monitor da gaming e per creatori mainstream
3440×1440	UWQHD ultrawide	Monitor ultrawide curvi 21:9
3840×2160	4K / UHD	Desktop di fascia alta e Apple Studio Display
5120×2880	5K	Apple iMac Retina, Studio Display
1080×1920	Telefono in verticale	Base FHD Android generica
1170×2532 / 1290×2796	iPhone moderno	Famiglia iPhone 13-16 a 19,5:9
2048×2732	iPad Pro 12.9"	Tablet 4:3

Quando ricorreresti a questo

• Sfondi per dispositivi personali: desktop, schermata di blocco, schermata iniziale, persino lo sfondo del quadrante di uno smartwatch.
• Sfondi virtuali per le videoconferenze. I gradienti pieni sono più facili per la segmentazione automatica di Zoom/Teams/Meet rispetto alle foto movimentate, riducono l'artefatto ad «alone» attorno a chi parla.
• Intestazioni per i social media: Twitter/X 1500×500, LinkedIn 1584×396, banner del canale YouTube 2560×1440 (con considerazioni sull'area sicura), Instagram Stories 1080×1920.
• Gradienti dell'identità del marchio. Il mesh viola-blu di Stripe, il rosa-arancio-viola di Instagram, il verde lime-verde scuro di Spotify, il viola-rosa di Slack, tutti esempi reali di gradienti che definiscono un marchio.
• Sezioni hero sulle pagine web) anche se i gradienti CSS sono di solito applicati direttamente tramite background-image, un ripiego PNG è utile per le e-mail (la maggior parte dei client di posta ancora non rende in modo affidabile i gradienti CSS) e per i browser senza interpolazione oklch.
• Stati vuoti, scheletri di caricamento, schede di dashboard: superfici dell'interfaccia che traggono vantaggio da un delicato interesse visivo senza distrarre.
• Stampa e gadget. Uno sfondo 4K a 300 DPI copre all'incirca un poster di 12 × 18 pollici.

Accessibilità, testo sopra i gradienti

L'errore pratico più comune con gli sfondi a gradiente è non superare il contrasto per qualsiasi testo sovrapposto. Il SC 1.4.3 delle WCAG 2.2 (Contrasto minimo, livello AA) richiede 4,5:1 per il testo del corpo e 3:1 per il testo grande (18 pt normale o 14 pt grassetto). Le WCAG sono state scritte per sfondi pieni; con un gradiente, conta il rapporto di contrasto in ogni punto sotto il testo, il punto peggiore è ciò che conta.

Soluzioni pratiche quando metti del testo sopra un gradiente: aggiungi un velo nero o bianco semitrasparente sotto il testo, limita il gradiente sotto il testo a un intervallo di luminosità ristretto, o usa una forte ombra del testo come ripiego. I gradienti verticali (scuro in alto, chiaro in basso) sono generalmente più adatti al testo di quelli diagonali, il testo che scorre da sinistra a destra incontra una luminosità di sfondo costante su ogni riga; un gradiente di 45° sotto un lungo blocco di testo costringe ogni riga ad attraversare l'intervallo di luminosità, rendendo molto più difficile un contrasto coerente.

Altre domande

Perché il mio gradiente ha bande visibili?

Due cause abituali. Primo, la compressione JPEG, la codifica basata su DCT del JPEG produce un «blocking» visibile sulle rampe tonali morbide, specialmente nelle regioni a bassa saturazione. Salva invece come PNG o WebP senza perdita. Secondo, la profondità di colore a 8 bit per canale: un gradiente a 8 bit tra due colori vicini ha solo pochi passi tonali distinti e l'occhio a volte riesce a risolverli. Aggiungere una sottile sovrapposizione di rumore/dithering (1-2% di rumore) spezza le bande aggiungendo una variazione naturale; molti strumenti di design di fascia alta lo fanno automaticamente.

Dovrei usare lineare, radiale o conico per uno sfondo del desktop?

Per la maggior parte degli sfondi, lineare con una leggera diagonale (attorno a 135°) o un radiale centrato fuori schermo appare migliore, creano asimmetria senza distrarre. I gradienti conici sono d'effetto ma si leggono come «progettato-da-un-designer» anziché come sfondo ambientale, quindi sono migliori per le superfici d'accento (copertine di album, post sui social) che per gli sfondi che fisserai per otto ore al giorno. I gradienti mesh (più gradienti radiali sovrapposti) sono l'aspetto più moderno ma richiedono o una libreria JS o un'immagine generata, un singolo gradiente radiale con due tinte complementari a bassa saturazione è una buona approssimazione.

Quali combinazioni di colori appaiono migliori?

Tre schemi affidabili: analogo (due colori adiacenti sulla ruota (dal viola al blu, dall'arancione al rosso) si legge come calmo e armonioso; monocromatico (stessa tinta, luminosità variabile) il classico blu di Stripe) si legge come riconoscibile come marchio e sottile; triadico-più-OKLCH (tre o quattro colori equidistanti interpolati in uno spazio percettivo) dà il moderno aspetto Stripe / Instagram. Evita due colori complementari puri (rosso/verde, blu/arancione) a meno che tu non stia usando esplicitamente l'interpolazione oklch(), sRGB ti darà un punto intermedio fangoso.

Viene inviato qualcosa a un server?

No. Il gradiente viene reso in un <canvas> nel tuo browser, il PNG viene esportato tramite canvas.toDataURL(), e la stringa CSS è generata localmente da JavaScript. Nulla delle tue scelte di colore, dimensioni o dell'immagine risultante lascia la pagina.

Strumenti correlati