Mesh Gradient CSS
Crea bellissimi sfondi mesh gradient con 4 punti colore e blur regolabile. Copia il CSS puro e usalo in qualsiasi progetto.
① Scegli 4 colori per ogni angolo ② Regola l'intensità del blur ③ Copia il CSS generato
Colore alto-sinistra
#C9B89A
Colore alto-destra
#7A5C38
Colore basso-sinistra
#1A3A5C
Colore basso-destra
#2A5A3A
Intensità blur (px): 160px
Come funziona
Il mesh gradient usa quattro layer radial-gradient, ognuno ancorato a un angolo. I gradienti si fondono attraverso la trasparenza CSS, e l'intensità del blur controlla quanto si espande ogni gradiente.
Intensità blur
Valori di blur più alti fanno espandere i gradienti di più e li fondono più dolcemente. Valori più bassi mantengono ogni colore più concentrato nel suo angolo.
Output CSS
Il CSS generato usa background-color come base e stratifica più definizioni radial-gradient su background-image. Non serve JavaScript o canvas.
background-color: #c9b89a;
background-image:
radial-gradient(ellipse at 0% 0%, #c9b89a 0%, transparent 160px),
radial-gradient(ellipse at 100% 0%, #7a5c38 0%, transparent 160px),
radial-gradient(ellipse at 0% 100%, #1a3a5c 0%, transparent 160px),
radial-gradient(ellipse at 100% 100%, #2a5a3a 0%, transparent 160px);
Cos'è un mesh gradient?
Un mesh gradient è una fusione di colori multi-punto fluida che produce sfondi liquidi, simili all'aurora. A differenza di un gradiente lineare o radiale standard, un mesh gradient posiziona più punti colore sulla superficie e interpola tra di essi. L'implementazione CSS usa layer radial-gradient sovrapposti ancorati a ogni angolo — tecnica leggera, senza immagini, compatibile con tutti i browser moderni. I mesh gradient sono popolari per sezioni hero, sfondi app, design card e landing page premium.
Domande frequenti
Un mesh gradient è un tipo di gradiente che fonde più colori posizionati in punti diversi su una superficie, invece di interpolare tra due estremi. Il risultato è un campo di colore fluido e organico che ricorda aurore o effetti di luce morbida.
Il mesh gradient CSS usa quattro layer radial-gradient — uno ancorato a ogni angolo — che si espandono verso l'esterno e sfumano nella trasparenza. Questi layer sono sovrapposti su background-image e si fondono naturalmente dove si sovrappongono.
Un gradiente lineare transiziona i colori lungo un singolo asse. Un mesh gradient posiziona punti colore in posizioni arbitrarie, producendo una fusione multi-direzionale fluida senza una direzione rigida.
Il blur controlla il raggio di espansione di ogni layer radial-gradient. Un valore più alto fa espandere ogni colore di più prima di sfumare nel trasparente, creando blend più lunghi e dolci. Un valore più basso mantiene ogni colore concentrato.
I mesh gradient solo-CSS sono limitati a punti di ancoraggio agli angoli. I mesh gradient veri (come in Figma o Illustrator) possono avere punti colore ovunque sulla superficie. Per mesh più complessi, servono canvas o WebGL.
Copia il CSS e applicalo a qualsiasi elemento HTML, come una sezione hero, body o card. Il background-color assicura la copertura completa come fallback.
La funzione radial-gradient è supportata in tutti i browser moderni (Chrome, Firefox, Safari, Edge) dal 2013. Il CSS generato non ha problemi di compatibilità per siti moderni.