CSS mesh gradient: zo bouw je er een uit radiale lagen

Een CSS mesh gradient is een achtergrond waarin kleur in meerdere richtingen tegelijk overloopt, alsof vlekken pigment in elkaar zijn getrokken. CSS heeft geen mesh-functie, en de mesh gradients die ooit voor SVG werden opgesteld zijn nooit in browsers verschenen, dus de webversie is nagebootst: drie tot vijf radial-gradient()-lagen gestapeld over een effen kleur, elk vervagend naar transparent. Zorgvuldig gedaan komt het dichtbij genoeg dat niemand het verschil ziet, weegt het een paar honderd bytes en blijft het op elk formaat scherp.

Wil je eerst de ontwerptheorie, wat een mesh is en waarom hij organisch voelt, lees dan mesh gradients. Deze gids gaat over er een in code bouwen.

Hoe de laagmethode werkt

Elke laag is één kleurpunt. De positie is de at-waarde, het bereik is de vervagingsafstand en de sterkte is de alfa van de kleur. Omdat het eerste kleurverloop in background-image bovenaan wordt geschilderd, doet de volgorde hier minder ertoe dan je zou denken: elke laag is grotendeels transparant, dus ze mengen waar ze overlappen. De background-color als basis schijnt door waar geen vlek reikt.

.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%);
}

Stap voor stap: bouw je eigen CSS mesh gradient

1. 1

   Kies een ondergrond

   Kies de effen kleur die tussen de vlekken zichtbaar is. Donkere ondergronden laten vlekken gloeien; lichte laten ze aanvoelen als aquarel. De ondergrond is ook je terugval als de kleurverlopen falen.

2. 2

   Kies drie tot vijf verwante kleuren

   Naburige tinten mengen schoon. Tegenpolen, zoals blauw en oranje, ontmoeten elkaar in een grijze veeg. Modderige kleurverlopen legt uit waarom en hoe je het vermijdt.

3. 3

   Plaats de vlekken uit het midden

   Duw punten naar hoeken en randen en laat minstens één deels buiten het vak vallen, zoals at 110% 0%. Gecentreerde vlekken lijken op een schietschijf.

4. 4

   Varieer bereik en sterkte

   Geef één kleur de grootste vervaging en hoogste alfa zodat hij leidt. Houd het accent klein en zwakker. Gelijke vlekken lijken mechanisch.

5. 5

   Meng in een betere kleurruimte

   Voeg waar ondersteund in oklab toe aan elke laag, zoals in radial-gradient(in oklab circle at 15% 20%, ...). Overlappingen blijven helderder dan in sRGB.

6. 6

   Werk af met korrel

   Grote zachte vervagingen vormen op veel schermen banden. Een vage ruisoverlay lost dat op en voegt een gedrukt gevoel toe; zie hieronder.

Zachtere overgangen met blur

Radiale vervagingen zijn glad, maar hun vormen zijn duidelijk rond. Een blur verzacht de cirkels tot iets organischers. Zet de lagen op een pseudo-element, vervaag het en maak het groter met een negatieve inset, zodat de vervaagde randen niet in de pagina vervagen. isolation: isolate houdt de negatieve z-index binnen het component.

.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);
}

Korrel toevoegen aan een CSS mesh gradient

Korrel doet twee dingen. Ze breekt de zichtbare trappen op die verschijnen in brede vervagingen met laag contrast, en geeft het oppervlak de tactiele, filmachtige kwaliteit waardoor kleurverlopen doordacht lijken in plaats van standaard. In CSS is de gebruikelijke bron een SVG-filter feTurbulence als piepkleine achtergrondafbeelding, met lage dekking bovenop gelegd. De volledige techniek staat in CSS-ruistextuur, en de ontwerpredenering in korrelige kleurverlopen.

Een mesh gradient animeren

Kleurverloopposities zijn op zichzelf niet te animeren, maar geregistreerde aangepaste eigenschappen wel. Declareer elke bewegende coördinaat met @property, gebruik hem in het kleurverloop en animeer de eigenschap. Houd de beweging traag en zet haar uit voor mensen die om verminderde beweging vragen.

@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; }
}

Elk beeld van deze animatie tekent de hele achtergrond opnieuw. Op een kleine kaart is dat triviaal; op een hero over het hele scherm is het de moeite van meten waard. De gids over geanimeerde kleurverlopen behandelt goedkopere alternatieven, zoals een te grote laag verplaatsen met transform.

Wanneer je een afbeelding of WebGL gebruikt

Shaders staan in WebGL-kleurverlopen. Een middenweg is de achtergrond één keer als levend materiaal te ontwerpen en te exporteren: de Marks van Gradiently zijn meshachtige materialen met kleur, korrel, licht en beweging, en een ontwerp dat ermee is gemaakt exporteert als PNG, JPEG of naadloze videoloop van 5 tot 30 seconden.

GR·Y97R·RQ

August Basin

Bekijk deze Mark