CSS mesh-gradient: slik bygger du en av radielle lag

En mesh-gradient i CSS er en bakgrunn der farge blandes i flere retninger samtidig, som om pytter av pigment hadde sivet inn i hverandre. CSS har ingen mesh-funksjon, og mesh-gradientene som en gang ble skissert for SVG kom aldri i nettlesere, så nettversjonen er en etterligning: tre til fem radial-gradient()-lag stablet over en flat farge, hvert tonet ut til transparent. Gjort nøye er den nær nok til at ingen ser forskjell, veier noen hundre byte og forblir skarp i alle størrelser.

Vil du ha designteorien først, hva et mesh er og hvorfor det føles organisk, les mesh-gradienter. Denne guiden handler om å bygge en i kode.

Slik fungerer lagmetoden

Hvert lag er ett fargepunkt. Posisjonen er at-verdien, rekkevidden er utfasingsavstanden, og styrken er fargens alfa. Fordi den første gradienten i background-image males øverst, betyr rekkefølgen mindre her enn du kanskje tror: hvert lag er for det meste gjennomsiktig, så de blandes der de overlapper. Grunnfargen background-color skinner gjennom overalt der ingen pøl når.

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

Steg for steg: bygg din egen mesh-gradient i CSS

1. 1

   Velg en bakgrunn

   Velg den flate fargen som vises mellom pølene. Mørke bakgrunner får pølene til å gløde, mens lyse får dem til å føles som akvarell. Bakgrunnen er også reserven din hvis gradientene svikter.

2. 2

   Velg tre til fem beslektede farger

   Nabofargetoner blandes rent. Motsatser, som blått og oransje, møtes i en grå flekk. Sølete gradienter forklarer hvorfor og hvordan du unngår det.

3. 3

   Plasser pølene utenfor midten

   Skyv punkter mot hjørner og kanter, og la minst ett ligge delvis utenfor boksen, som at 110% 0%. Sentrerte pøler ser ut som en blink.

4. 4

   Varier rekkevidde og styrke

   Gi én farge den største utfasingen og den høyeste alfaen så den leder. Hold aksenten liten og svakere. Like pøler ser mekaniske ut.

5. 5

   Bland i et bedre fargerom

   Legg til in oklab på hvert lag, som i radial-gradient(in oklab circle at 15% 20%, ...), der det støttes. Overlappene forblir lysere enn i sRGB.

6. 6

   Fullfør med korn

   Store myke utfasinger får bånd på mange skjermer. Et svakt støyoverlegg retter det og gir et trykt preg, se under.

Mykere blandinger med uskarphet

Radielle utfasinger er myke, men formene deres er åpenbart runde. En uskarphet mykner sirklene til noe mer organisk. Legg lagene på et pseudoelement, gjør det uskarpt og gjør det for stort med en negativ inset så de uskarpe kantene ikke toner ut i siden. isolation: isolate holder den negative z-index inne i komponenten.

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

Å legge korn på en mesh-gradient i CSS

Korn gjør to jobber. Det bryter opp de synlige trinnene som dukker opp i brede utfasinger med lav kontrast, og det gir flaten den taktile, filmaktige kvaliteten som får gradienter til å se gjennomtenkte ut i stedet for standard. I CSS er den vanlige kilden et SVG-feTurbulence-filter brukt som et lite bakgrunnsbilde, lagt oppå med lav dekning. Hele teknikken står i CSS-støytekstur, og designresonnementet i kornete gradienter.

Å animere en mesh-gradient

Gradientposisjoner kan ikke animeres alene, men registrerte egendefinerte egenskaper kan. Deklarer hver koordinat som beveger seg med @property, bruk den inne i gradienten og animer egenskapen. Hold bevegelsen langsom, og skru den av for folk som ber om redusert bevegelse.

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

Hvert bilde i denne animasjonen tegner hele bakgrunnen om. På et lite kort er det trivielt, mens det på en fullskjerms hero er verdt å måle. Guiden om animerte gradienter tar for seg billigere alternativer, som å flytte et overdimensjonert lag med transform.

Når du bør bruke et bilde eller WebGL i stedet

Shadere er omtalt i WebGL-gradienter. En mellomvei er å designe bakgrunnen én gang som et levende materiale og eksportere den: Gradiently sine Marks er mesh-lignende materialer med farge, korn, lys og bevegelse, og et design laget med en eksporteres som en PNG, en JPEG eller en sømløs videoløkke på 5 til 30 sekunder.

GR·Y97R·RQ

August Basin

Se denne Marken