Gradienti mesh: cosa sono e come crearne uno

Un gradiente mesh è un gradiente costruito da più punti di colore distribuiti su una superficie, ciascuno dei quali sfuma nei vicini in tutte le direzioni contemporaneamente. Un gradiente lineare si muove lungo una linea e uno radiale si allarga da un centro; una mesh non ha un percorso unico, quindi il colore si raccoglie, scorre e si sovrappone come la luce nell’acqua. Ecco perché i gradienti mesh sembrano organici, e perché sono diventati lo stile predefinito per sezioni hero, sfondi e copertine di album.

Questa guida spiega come funziona una mesh, come crearne una in CSS e nei programmi di grafica, e come evitare le chiazze grigie e le strisce che fanno sembrare economiche così tante di esse. Per le altre forme, vedi i tipi di gradiente.

Cosa rende un gradiente una mesh

In una vera trama di sfumatura, come quella di Adobe Illustrator, la superficie è divisa in una griglia. Ogni punto della griglia contiene un colore, e il programma sfuma in modo morbido tra i punti vicini, piegando la griglia per guidare il colore. Le sfumature a forma libera eliminano la griglia e ti lasciano mettere i punti di colore dove vuoi. I gradienti mesh per web e social di solito prendono una terza strada: morbide macchie di colore stese su una base e fuse tra loro.

Tutte e tre condividono un’idea. Il colore di ogni pixel è un mix dei punti di colore vicini, pesato in base a quanto sono vicini. Sposti un punto e cambia solo il suo intorno, ed è questo che permette a una mesh di sembrare fatta a mano invece che calcolata.

Perché i gradienti mesh sembrano organici

Quella qualità vagante è anche il pericolo. Senza struttura, una mesh può sembrare una sfocatura casuale. Quelle riuscite hanno una composizione: un’area luminosa dove l’occhio arriva per primo, un’area più scura che dà peso e un’area calma in cui far stare le parole.

Come creare un gradiente mesh in CSS

1. 1

   Imposta un colore di base

   Scegli un fondo scuro o chiaro. Si vede ovunque le pozze di colore sfumano, quindi decide l’atmosfera generale.

2. 2

   Posiziona da tre a cinque pozze di colore

   Ogni pozza è un radial-gradient centrato in una posizione con at x% y%, che sfuma in transparent. Mettile vicino agli angoli e ai bordi invece che al centro.

3. 3

   Lasciale sovrapporre

   Fai sfumare ogni pozza tra il 45% e il 60% del percorso, così le vicine si incontrano. È nelle sovrapposizioni che la mesh trova la sua ricchezza.

4. 4

   Lascia una zona calma

   Tieni un’area quasi tutta del colore di base, di solito dove andrà il titolo. Vedi il testo su un gradiente.

5. 5

   Aggiungi grana

   Un leggero livello di rumore nasconde le strisce e aggiunge profondità. I gradienti granulosi mostra il codice.

.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(at 12% 18%, #7c3aed 0px, transparent 55%),
    radial-gradient(at 88% 12%, #0ea5e9 0px, transparent 50%),
    radial-gradient(at 80% 88%, #14b8a6 0px, transparent 55%),
    radial-gradient(at 20% 92%, #f472b6 0px, transparent 45%);
}

Dato che le pozze sono in percentuale, la mesh si ridimensiona con il suo riquadro. Su forme molto diverse, come una storia verticale e un banner largo, regola le posizioni at in modo che l’area luminosa cada ancora dove vuoi. La stessa palette si può animare lentamente spostando quelle posizioni; gli sfondi con gradiente animato spiega come farlo senza penalizzare le prestazioni.

Creare un gradiente mesh nei programmi di grafica

Nei programmi con una vera trama o sfumatura a forma libera, posiziona direttamente i punti di colore e trascinali finché la composizione funziona. In quelli che non ce l’hanno, il metodo della sfocatura funziona ovunque: disegna da tre a cinque forme morbide nei tuoi colori su un rettangolo di base, sfocale molto, spesso di un quarto della larghezza della tela o più, e lasciale sovrapporre. Poi aggiungi sopra un livello di grana ed esporta alla dimensione finale invece di ingrandire.

Errori nei gradienti mesh e come correggerli

Una mesh vale quanto la sua palette. Se non sei sicuro di quali colori si fonderanno in modo pulito, parti da una famiglia di colori analoghi e aggiungi un accento a contrasto in una sola pozza.

GR·FVZ6·KW

Thin Dune

Vedi questo Mark

Se preferisci descrivere una mesh invece di costruirla, la Forge crea nuovi Mark da una frase o controllo per controllo, con fino a otto colori e tre materiali sovrapposti.