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

[Canonical HTML page](https://gradiently.design/nb/guide/css-mesh-gradient)

Det finnes ingen mesh-gradient() i CSS. Her er lagmetoden som etterligner en på en overbevisende måte, uskarpheten og kornet som fullfører den, og når et bilde eller en shader er det bedre valget.

## The short version

- CSS har ingen innebygd mesh-gradientfunksjon, så en mesh-gradient i CSS bygges ved å stable flere radielle gradienter over en flat grunnfarge.
- Hvert lag er en pøl av farge på sin egen posisjon som toner ut til gjennomsiktig, og overlappene skaper den myke blandingen i flere retninger som kjennetegner et mesh.
- Et uskarphetsfilter på et pseudoelement mykner pølene ytterligere, og et svakt støylag skjuler banding.
- Statiske lagdelte gradienter er billige å gjengi, men store uskarphetsfiltre og animerte lag tegnes ofte om og bør holdes langsomme, små eller valgfrie.
- Når et design trenger mange fargepunkter, vridde former eller jevn bevegelse i fullskjerm, er et eksportert bilde, en video eller en WebGL-shader som regel det bedre verktøyet.

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](https://gradiently.design/nb/guide/mesh-gradients). 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.

- Pøl 1: fiolett, øverst til venstre: `radial-gradient(circle at 15% 20%, #7c3aed, #0b1026 55%)`
- Pøl 2: rosa, øverst til høyre: `radial-gradient(circle at 85% 25%, #ec4899, #0b1026 50%)`
- Pøl 3: cyan, nederst: `radial-gradient(ellipse at 60% 90%, #06b6d4, #0b1026 60%)`
- Pøl 4: rav som aksent: `radial-gradient(circle at 25% 80%, #f59e0b, #0b1026 45%)`

De fire fargepunktene i ett mesh, hver vist alene på den marineblå grunnen. Stablet blandes de til ett felt.

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

Hele stabelen. Endre én `at`-verdi, så balanseres hele komposisjonen på nytt.

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

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. **Velg tre til fem beslektede farger** Nabofargetoner blandes rent. Motsatser, som blått og oransje, møtes i en grå flekk. [Sølete gradienter](https://gradiently.design/nb/guide/muddy-gradients) forklarer hvorfor og hvordan du unngår det.
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. **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. **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. **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.

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

Et uskarpt mesh på et pseudoelement. Tekst inne i `.mesh` forblir skarp fordi bare pseudoelementet gjøres uskarpt.

> **Uskarphet er den dyre delen** En statisk uskarphet males én gang og er som regel greit. Et uskarpt lag som beveger seg eller endrer størrelse, tegnes om for hvert bilde, og store uskarphetsradier i fullskjerm koster mest. Se [ytelse for CSS-gradienter](https://gradiently.design/nb/guide/css-gradient-performance).

## Å 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](https://gradiently.design/nb/guide/css-noise-texture), og designresonnementet i [kornete gradienter](https://gradiently.design/nb/guide/grainy-gradients).

### Uten korn

- Synlige ringer i mørke områder på mange skjermer
- Flaten leses som en flat skjermfarge
- Ser ut som en malstandard

### Med svakt korn

- Trinnene brytes opp og forsvinner
- Flaten leses som papir, film eller trykk
- Føles bevisst og ferdig

## Å 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](https://gradiently.design/nb/guide/reduced-motion).

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

Én pøl som driver over toppen. Legg til en egenskap til per koordinat du vil flytte.

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](https://gradiently.design/nb/guide/css-animated-gradient) tar for seg billigere alternativer, som å flytte et overdimensjonert lag med `transform`.

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

| Tilnærming | Best til | Pass på |
| --- | --- | --- |
| Lagdelte CSS-gradienter | Statiske bakgrunner, kort, heroer med tre til fem farger | Rundt utseende pøler, banding uten korn |
| CSS med uskarphet | Mykere, mer organiske statiske felt | Omtegningskostnad hvis animert eller ofte endret i størrelse |
| Eksportert bilde (AVIF eller WebP) | Komplekse mesh med mange punkter eller malerisk former | Filvekt og en fast beskjæring per format |
| Videoløkke | Rik bevegelse på en hero | Filstørrelse, regler for autoavspilling, redusert bevegelse |
| WebGL-shader | Fullskjerm, flytende, interaktiv bevegelse | Kodekompleksitet, batteribruk, reserver |

Velg det letteste verktøyet som fortsatt ser riktig ut.

Shadere er omtalt i [WebGL-gradienter](https://gradiently.design/nb/guide/shader-gradients). 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.

En Mark: fargepøler, materiale og korn gjengitt live i stedet for etterlignet med lag.

## FAQ

### Kan du lage en mesh-gradient med ren CSS?

Ikke innebygd, men å stable tre til fem radielle gradienter som toner ut til gjennomsiktig over en grunnfarge gir et overbevisende mesh. En uskarphet og et støylag fullfører det.

### Hvor mange radielle gradienter trenger et CSS-mesh?

Tre til fem er som regel nok. Færre ser ut som en enkel glød, mens flere gjerne blir sølete og vanskeligere å balansere.

### Hvorfor ser CSS-mesh-gradienten min sølete ut?

Motsatte fargetoner som møtes i sRGB blandes gjennom grått. Bruk nabofarger, reduser overlappen eller legg til `in oklab` på hvert lag.

### Er en mesh-gradient i CSS dårlig for ytelsen?

En statisk er billig. Kostnadene stiger med store uskarphetsfiltre og med animasjon, fordi bakgrunnen tegnes om for hvert bilde.

### Støtter SVG mesh-gradienter?

Mesh-gradienter ble skissert for SVG 2, men nettlesere implementerte dem aldri, så på nettet etterligner du dem med lag, bruker et bilde eller gjengir dem med WebGL.