Gradiente mesh in CSS: come costruirlo con livelli radiali

Un gradiente mesh in CSS è uno sfondo in cui il colore si sfuma in più direzioni insieme, come se pozze di pigmento si fossero impregnate l’una nell’altra. Il CSS non ha una funzione mesh, e i gradienti mesh un tempo abbozzati per l’SVG non sono mai arrivati nei browser, quindi la versione per il web è un’imitazione: da tre a cinque livelli radial-gradient() sovrapposti a un colore piatto, ciascuno che sfuma verso transparent. Fatta con cura, è abbastanza vicina da non far distinguere nulla, pesa poche centinaia di byte e resta nitida a qualsiasi dimensione.

Se vuoi prima la teoria del design, cos’è una mesh e perché sembra organica, leggi i gradienti mesh. Questa guida riguarda come costruirne uno nel codice.

Come funziona il metodo a livelli

Ogni livello è un punto di colore. La sua posizione è il valore at, la sua portata è la distanza di dissolvenza e la sua forza è l’alfa del colore. Poiché il primo gradiente in background-image viene dipinto in cima, qui l’ordine conta meno di quanto si pensi: ogni livello è per lo più trasparente, quindi si mescolano dove si sovrappongono. Il background-color di base si vede ovunque nessuna pozza arrivi.

.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(circle at 15% 20%, rgb(124 58 237 / 0.85), transparent 55%),
    radial-gradient(circle at 85% 25%, rgb(236 72 153 / 0.75), transparent 50%),
    radial-gradient(ellipse at 60% 90%, rgb(6 182 212 / 0.7), transparent 60%),
    radial-gradient(circle at 25% 80%, rgb(245 158 11 / 0.55), transparent 45%);
}

Passo per passo: costruisci il tuo gradiente mesh in CSS

1. 1

   Scegli uno sfondo

   Scegli il colore piatto che si vede tra le pozze. Gli sfondi scuri fanno brillare le pozze; quelli chiari le fanno sembrare acquerello. Lo sfondo è anche la tua riserva se i gradienti falliscono.

2. 2

   Scegli da tre a cinque colori affini

   Le tonalità vicine si sfumano in modo pulito. Gli opposti, come blu e arancione, si incontrano in una macchia grigia. Gradienti sporchi spiega perché e come evitarlo.

3. 3

   Metti le pozze fuori centro

   Spingi i punti verso angoli e bordi, e lascia che almeno uno stia in parte fuori dal riquadro, come at 110% 0%. Le pozze centrate sembrano un bersaglio.

4. 4

   Varia portata e forza

   Dai a un colore la dissolvenza più ampia e l’alfa più alta, così guida. Tieni l’accento piccolo e più debole. Pozze uguali sembrano meccaniche.

5. 5

   Sfuma in uno spazio colore migliore

   Aggiungi in oklab a ogni livello, come in radial-gradient(in oklab circle at 15% 20%, ...), dove supportato. Le sovrapposizioni restano più luminose che in sRGB.

6. 6

   Finisci con la grana

   Le grandi dissolvenze morbide fanno banding su molti schermi. Un debole strato di rumore lo risolve e dà un tocco di stampa; vedi più avanti.

Sfumature più morbide con la sfocatura

Le dissolvenze radiali sono morbide ma le loro forme sono ovviamente rotonde. Una sfocatura ammorbidisce i cerchi rendendoli più organici. Metti i livelli su uno pseudo-elemento, sfocalo e ingrandiscilo con un inset negativo così i bordi sfocati non svaniscono nella pagina. isolation: isolate tiene lo z-index negativo dentro il componente.

.mesh {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #0b1026;
}

.mesh::before {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: -1;
  background-image:
    radial-gradient(circle at 20% 25%, #7c3aed, transparent 40%),
    radial-gradient(circle at 80% 30%, #ec4899, transparent 35%),
    radial-gradient(circle at 55% 85%, #06b6d4, transparent 40%);
  filter: blur(48px);
}

Aggiungere la grana a un gradiente mesh in CSS

La grana ha due compiti. Spezza i gradini visibili che compaiono nelle dissolvenze ampie e a basso contrasto, e dà alla superficie la qualità tattile, da pellicola, che fa sembrare i gradienti ponderati invece che predefiniti. In CSS, la fonte abituale è un filtro SVG feTurbulence usato come minuscola immagine di sfondo, sovrapposta con bassa opacità. La tecnica completa è nella texture di rumore in CSS, e il ragionamento di design nei gradienti con grana.

Animare un gradiente mesh

Le posizioni dei gradienti non sono animabili da sole, ma le proprietà personalizzate registrate sì. Dichiara ogni coordinata che si muove con @property, usala dentro il gradiente e anima la proprietà. Mantieni il movimento lento e spegnilo per chi chiede il movimento ridotto.

@property --x1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 15%;
}

.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(circle at var(--x1) 20%, rgb(124 58 237 / 0.85), transparent 55%),
    radial-gradient(ellipse at 60% 90%, rgb(6 182 212 / 0.7), transparent 60%);
  animation: drift 20s ease-in-out infinite alternate;
}

@keyframes drift {
  to { --x1: 55%; }
}

@media (prefers-reduced-motion: reduce) {
  .mesh { animation: none; }
}

Ogni fotogramma di questa animazione ridisegna l’intero sfondo. Su una piccola scheda è banale; su un hero a schermo intero vale la pena misurarlo. La guida ai gradienti animati tratta alternative più economiche come spostare un livello sovradimensionato con transform.

Quando usare invece un’immagine o WebGL

Gli shader sono trattati nei gradienti WebGL. Una via di mezzo è progettare lo sfondo una volta come materiale vivo ed esportarlo: i Mark di Gradiently sono materiali simili a mesh con colore, grana, luce e movimento, e un design realizzato con uno di essi si esporta come PNG, JPEG o video in loop senza stacchi da 5 a 30 secondi.

GR·Y97R·RQ

August Basin

Vedi questo Mark