Generatore di mesh gradient

Crea mesh gradient con punti colore trascinabili

I mesh gradient fondono molti colori su una superficie con transizioni morbide e organiche. Sono diventati un elemento fisso di sfondi hero, schermate di avvio delle app e copertine musicali perché risultano più ricchi di un semplice gradiente lineare a due colori. Questo generatore di mesh gradient ti permette di posizionare da tre a sei punti colorati direttamente sulla tela, trascinarli dove vuoi e vedere la sfumatura aggiornarsi all'istante.

Come funziona in puro CSS

I browser non supportano veri mesh gradient, ma puoi approssimarli sovrapponendo diversi sfondi radial-gradient(). Ogni strato è centrato su uno dei tuoi punti e sfuma dal colore del punto a una versione completamente trasparente dello stesso colore, e tutti gli strati poggiano su un background-color di base. Le sfumature sovrapposte mescolano i colori in modo fluido, creando l'effetto mesh. Il CSS generato è un'unica dichiarazione senza immagini, quindi si carica istantaneamente e si adatta a qualsiasi dimensione dell'elemento.

Sfumare verso rgba() con alpha zero, invece di usare la parola chiave transparent, evita gli aloni grigi che possono comparire in alcuni motori di rendering e consente anche di riprodurre esattamente lo stesso gradiente su un canvas HTML per l'esportazione PNG.

Sfocatura, rumore e palette

Il cursore della sfocatura aggiunge un filter: blur() CSS per un aspetto ancora più morbido, mentre il cursore del rumore sovrappone una texture SVG di rumore frattale che aggiunge una grana sottile e riduce il banding dei colori sulle superfici ampie. Il pulsante Random palette sceglie un insieme armonioso di tonalità con saturazione e luminosità bilanciate, e Random layout riorganizza anche i punti. Quando sei soddisfatto, copia il CSS nel tuo foglio di stile o scarica un PNG da 1600 per 900 pixel. Tutto viene generato localmente nel tuo browser e nulla viene caricato.