Generatore di Mesh Gradient: trascina i punti, copia il CSS | We.Inc
Trascina punti di colore su un canvas per creare un mesh gradient morbido, poi copia CSS puro fatto di radial gradient sovrapposti o scarica un PNG. Gratis, nel tuo browser.
Generatore di Mesh Gradient
Un mesh gradient fonde diversi punti di colore su una superficie invece di seguire una sola linea. Sul web puoi simularlo con CSS puro sovrapponendo un radial-gradient per ogni punto sopra un colore di base. Trascina i punti qui sotto, imposta colore e raggio di ciascuno, poi copia il CSS o salva un PNG.
Quale strumento per gradienti fa al caso tuo
Vuoi
Usa
Risultato
Uno sfondo statico a macchie morbide, senza script
Questo generatore di mesh
CSS o PNG
Uno sfondo che si muove lentamente
Generatore di shader gradient
Componente WebGL
Una sfumatura lineare, radiale o conica da due a cinque stop
Generatore di gradienti CSS
Una sola riga di gradiente
Ogni punto qui diventa un proprio radial gradient, dipinto sopra un colore di base. Poiché il risultato è normale CSS, non richiede download, non ha bisogno di JavaScript sul tuo sito e si adatta a qualsiasi dimensione del riquadro senza sfocarsi.
Scegli un preset o tieni quello predefinito, poi trascina una qualsiasi maniglia numerata sul canvas per spostare quel colore.
Da tastiera puoi mettere il focus su una maniglia e spostarla con i tasti freccia, oppure scrivere valori X e Y esatti nell'elenco dei punti.
Cambia il colore e il raggio di un punto. Il raggio è il punto in cui il colore diventa del tutto trasparente, misurato come quota della distanza dal punto all'angolo più lontano del riquadro.
Aggiungi fino a otto punti o rimuovi quelli in più, poi copia il CSS o scarica il canvas come PNG nella dimensione che scegli.
Da tre a cinque punti di solito danno un risultato più ricco di otto. Più livelli trasformano soprattutto il centro in un pasticcio.
Metti il colore di base vicino al punto più chiaro per un look pastello, o molto scuro per uno stile notturno luminoso.
Tieni il testo dei titoli sopra la zona più calma, e controllane il contrasto nei punti più chiari e più scuri che copre.
Il PNG è comodo per email e immagini social, dove uno sfondo CSS non viaggia insieme al design.
Domande frequenti
È un vero mesh gradient?
Le app di design come gli editor vettoriali creano mesh veri a partire da una griglia di patch. Il CSS non ha una funzione mesh, quindi questo strumento sovrappone radial gradient, ottenendo lo stesso effetto morbido e multicolore per sfondi e sezioni hero.
In cosa è diverso dal generatore di shader gradient?
Lo strumento shader disegna un gradiente animato con WebGL ed esporta un componente che esegue uno script. Questo crea un'immagine statica solo con il CSS, quindi si visualizza all'istante, si stampa e funziona dove gli script sono bloccati.
Perché ogni colore sfuma in una versione trasparente di sé stesso?
Sfumare verso la parola chiave transparent può tingere il bordo di grigio in alcune modalità di interpolazione. Chiudere ogni livello con gli stessi valori di rosso, verde e blu e alpha zero mantiene pulito il bordo.
Posso usare il CSS in Tailwind?
Sì. Metti le dichiarazioni in una classe del tuo foglio di stile, oppure incolla il valore di background-image in una proprietà arbitraria come [background-image:...] se preferisci tenerlo inline.
Il PNG corrisponde esattamente al CSS?
Quasi. Il download è disegnato su un canvas con gli stessi punti, colori e raggi, ma i browser possono ammorbidire i gradienti del canvas in modo leggermente diverso da quelli CSS.
Come i radial gradient sovrapposti creano un mesh
background-image accetta un elenco separato da virgole, e il primo livello dell'elenco viene dipinto sopra. Qui ogni livello è un cerchio centrato su un punto, pieno al centro e trasparente al suo raggio, così i colori vicini si sovrappongono e si mescolano.
Non è indicata alcuna parola chiave di dimensione, quindi ogni cerchio usa la dimensione predefinita farthest-corner, e le percentuali degli stop si adattano al riquadro. Un punto vicino al centro si espande quindi meno di uno in un angolo con lo stesso raggio, e un banner largo ingrandisce ogni cerchio: fai l'anteprima con le proporzioni che userai davvero.
Ottenere un bel risultato
Scegli colori vicini tra loro sulla ruota dei colori per risultati pacati, e aggiungi un solo punto in contrasto per dare energia. Sposta i punti in parte oltre il bordo per suggerire che il colore continua oltre la cornice.
Se vedi bande visibili su grandi gradienti scuri, aggiungi un'immagine con una leggera texture di rumore come livello extra, oppure schiarisci un po' la base.
Il CSS dietro un mesh
Questo è il preset Harbour scritto a mano. Modifica qualsiasi valore e il risultato si aggiorna nel riquadro.
Quattro punti su una base chiara
Ogni radial-gradient è un punto di colore. I livelli elencati per primi stanno sopra quelli successivi.
Cosa controlla ogni impostazione
Impostazioni e il CSS che producono
Impostazione
Parte del CSS
Effetto
Posizione del punto
circle at X% Y%
Dove il colore è più intenso
Colore del punto
primo color stop
La tonalità dipinta in quel punto
Raggio
secondo stop, es. 55%
Quota della distanza dall'angolo più lontano in cui il colore è del tutto trasparente
Colore di base
Ciò che si vede dove nessun punto arriva
Ordine dei punti
ordine dei livelli
I punti precedenti coprono i successivi dove si sovrappongono
Porto
Albicocca
Turno di notte
Prato
Editor di mesh gradient
Trascina i punti di colore numerati sul canvas, imposta colore e raggio di ciascuno, poi copia il CSS o scarica un PNG. Preset: Porto, Albicocca, Turno di notte, Prato.
Preset
Punto {n} a {x}% {y}%. Usa i tasti freccia per spostarlo.