Guida

Mesh gradient generator con CSS e SVG

Scegli da 2 a 8 colori e questo mesh gradient generator li fonde in uno sfondo morbido e continuo, che modelli trascinando i punti colore. Con Copia CSS ottieni un gradiente in CSS che funziona in qualsiasi browser moderno, con Scarica SVG un file da 1600 × 1200 che si adatta a ogni dimensione. Tutto gira nel tuo browser, senza WebGL, senza caricare file e senza account.

Come funziona, passo per passo

Guarda l'anteprima. I piccoli punti tondi che vedi sono i punti colore, uno per ogni macchia di colore della mesh.
Premi Casuale per avere una nuova palette e una nuova disposizione a caso, quante volte vuoi, finché il risultato si avvicina a ciò che cerchi.
Apri la riga Colori e clicca su un campione per scegliere il tuo colore. Aggiungi colore ne aggiunge altri (fino a 8), mentre la piccola x su un campione ne toglie uno (fino a restare con 2).
Sposta il cursore Complessità, da 2 a 6, per cambiare quanti punti colore ha la mesh.
Trascina un punto per spostarlo, con il mouse o con il dito. Con la tastiera seleziona un punto e premi i tasti freccia; tieni premuto Maiusc per passi più ampi.
Premi Copia CSS oppure Scarica SVG quando l'anteprima ti convince. Una breve scritta, Copiato o Salvato, lo conferma.

L'anteprima si aggiorna a ogni modifica e la casella Codice CSS mostra sempre il CSS esatto di ciò che vedi. Se cambi la complessità o premi «Casuale», i punti vengono disposti di nuovo e quelli che avevi trascinato tornano in posizioni nuove.

Che cosa fa la complessità

La complessità crea una griglia di complessità × complessità punti colore, e ogni punto riceve un colore dalla tua palette. Più punti danno una mesh più varia, con macchie più piccole; meno punti danno ampie campiture semplici.

Complessità 2: 4 punti, ogni macchia occupa il 65% della tela
Complessità 3: 9 punti, 43%
Complessità 4: 16 punti, 33%
Complessità 5: 25 punti, 26%
Complessità 6: 36 punti, 22%

Una cosa da tenere d'occhio: i colori vengono distribuiti ai punti, quindi una palette può avere più colori di quanti punti abbia la mesh. Con complessità 2 i punti sono solo 4, perciò una palette da 6 colori ne mostra al massimo 4 per volta. Alza la complessità per far entrare anche gli altri.

Mesh gradient CSS da incollare

La casella Codice CSS contiene due dichiarazioni: un background-color (la media della tua palette, così nessun angolo resta scoperto) e un background-image che impila un radial-gradient() per ogni punto colore. È CSS normale, senza file immagine né script.

Ogni livello sfuma da un colore pieno al centro alla trasparenza totale sul bordo, e i livelli si sovrappongono: è questo che fa fondere i colori. Dimensioni e posizione sono in percentuale, quindi il gradiente si allunga per adattarsi all'elemento a cui lo applichi.

Mesh gradient SVG: il download

Scarica SVG salva gradiente-mesh.svg. Il file ha una viewBox di 1600 × 1200, un rettangolo di base dello stesso colore medio e un radialGradient per ogni punto colore. Essendo vettoriale, resta nitido come sfondo dello smartphone, sfondo di una slide o immagine per un post social. In una cornice che non sia 4:3 riempie la cornice e ritaglia i bordi invece di deformarsi.

Se ti serve un PNG, apri l'SVG in un browser o in un editor che legge gli SVG ed esportalo alla dimensione che vuoi.

Usare il gradiente come sfondo

Sito web o sezione hero: incolla il CSS nella regola di quell'elemento. Il testo sopra un mix di colori molto vivace può essere difficile da leggere, quindi provalo con Verifica Contrasto Colori.
Slide, sfondi e post social: scarica l'SVG e posizionalo o esportalo dalla tua app di design.
Per rispettare un brand: clicca su un campione e scegli il tuo colore. Selettore Colore da Foto può prima estrarre un colore da una foto o da un logo.

Entrambe le uscite sono un'istantanea dell'anteprima attuale. Se mescoli di nuovo a caso, copia o scarica ancora per ottenere la nuova versione.

Domande frequenti

Esiste un mesh gradient generator che mi dia il CSS?

Sì, questo. La casella «Codice CSS» mostra un background-color più un background-image composto da livelli radial-gradient() impilati, uno per punto colore. È CSS standard, senza JavaScript né file immagine, quindi funziona in qualsiasi browser moderno. Premi «Copia CSS» e incollalo in un foglio di stile o in un attributo style.

Posso scaricare un mesh gradient come SVG?

Sì. «Scarica SVG» salva un file con una viewBox di 1600 × 1200. È costruito con livelli radialGradient, quindi resta nitido a qualsiasi dimensione. In una cornice che non sia 4:3 riempie la cornice e ritaglia i bordi invece di deformarsi.

Come uso il gradiente come sfondo di un sito?

Copia il CSS e incolla le due dichiarazioni nella regola dell'elemento che vuoi colorare, per esempio una sezione hero o il body. Le macchie sono posizionate in percentuale, quindi si allungano insieme all'elemento. Controlla che il testo resti leggibile sopra i colori scelti.

Posso ottenere il gradiente in PNG?

Non direttamente: questo strumento esporta CSS e SVG, non PNG. Apri l'SVG scaricato in un browser o in un editor che legge gli SVG, poi esportalo o fai uno screenshot nella dimensione in pixel che ti serve.

Posso animare il mesh gradient?

No. Lo strumento crea un unico gradiente fermo: puoi trascinare i punti e cambiare i colori, ma il CSS e l'SVG che esporta non si muovono.

È lo stesso della sfumatura a rete di Illustrator?

No. La sfumatura a rete di Illustrator è una griglia di patch vettoriali modificabili. Questo generatore fonde gradienti radiali morbidi e sovrapposti, uno per punto colore: l'effetto è simile, liscio e multicolore, ma si esporta come semplice CSS o SVG.

Dove trovo un generatore di sfumature con più colori?

Questo strumento è un generatore di sfumature a mesh: parti da 2 a 8 colori che scegli tu e ottieni il CSS di uno sfondo morbido. Per un semplice passaggio tra due colori esistono altri strumenti, qui l'obiettivo è un effetto mesh senza immagini da ospitare.

Consigliati

Govee Barra Luminosa Smart LED
Porta la stessa luce morbida e colorata sulla parete dietro il monitor.
Stampante portatile Fujifilm Instax Mini Link 3
Stampa il tuo mesh preferito come cartolina tascabile o ricordo dello sfondo.
Calibrite Display 123 Colorimetro
Controlla che il tuo gradiente appaia uguale su ogni schermo.

Aiuta a mantenere gratuiti gli strumenti. ✨

Le immagini sono solo a scopo illustrativo. In qualità di Affiliato Amazon io ricevo un guadagno dagli acquisti idonei.