# CSS mesh gradient: sådan bygger du en af radiale lag

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

Der findes ingen mesh-gradient() i CSS. Her er lagmetoden, der efterligner en overbevisende, sløringen og kornet, der færdiggør den, og hvornår et billede eller en shader er det bedre valg.

## The short version

- CSS har ingen indbygget mesh-gradientfunktion, så en CSS mesh gradient bygges ved at stable flere radiale gradienter oven på en flad basisfarve.
- Hvert lag er en pøl af farve på sin egen position, der falmer til gennemsigtig, og overlapningerne skaber den bløde blanding i flere retninger, som en mesh har.
- Et sløringsfilter på et pseudoelement blødgør pølerne yderligere, og et svagt støjlag skjuler banding.
- Statiske lagdelte gradienter er billige at gengive, men store sløringer og animerede lag gentegnes ofte og bør holdes langsomme, små eller valgfrie.
- Når et design har brug for mange farvepunkter, forvrængede former eller jævn bevægelse i fuld skærm, er et eksporteret billede, en video eller en WebGL-shader som regel det bedre værktøj.

En **CSS mesh gradient** er en baggrund, hvor farve blandes i flere retninger på én gang, som om pøle af pigment var sivet ind i hinanden. CSS har ingen mesh-funktion, og de mesh-gradienter, der engang blev udkastet til SVG, kom aldrig i browserne, så webversionen er en efterligning: tre til fem `radial-gradient()`-lag stablet oven på en flad farve, hver falmende til `transparent`. Gjort omhyggeligt er den tæt nok på til, at ingen kan se forskel, vejer nogle hundrede bytes og forbliver skarp i enhver størrelse.

Vil du have designteorien først, altså hvad en mesh er, og hvorfor den føles organisk, så læs [mesh-gradienter](https://gradiently.design/da/guide/mesh-gradients). Denne guide handler om at bygge en i kode.

## Sådan virker lagmetoden

Hvert lag er ét farvepunkt. Dets position er `at`-værdien, dets rækkevidde er falmeafstanden, og dets styrke er farvens alfa. Fordi den første gradient i `background-image` males øverst, betyder rækkefølgen mindre, end du måske tror: hvert lag er for det meste gennemsigtigt, så de blandes, hvor de overlapper. Basens `background-color` skinner igennem, hvor ingen pøl når hen.

- Pøl 1: violet, øverst til venstre: `radial-gradient(circle at 15% 20%, #7c3aed, #0b1026 55%)`
- Pøl 2: pink, øverst til højre: `radial-gradient(circle at 85% 25%, #ec4899, #0b1026 50%)`
- Pøl 3: cyan, forneden: `radial-gradient(ellipse at 60% 90%, #06b6d4, #0b1026 60%)`
- Pøl 4: ravgul accent: `radial-gradient(circle at 25% 80%, #f59e0b, #0b1026 45%)`

De fire farvepunkter i én mesh, hver vist alene på den marineblå base. Stablet blandes de til ét 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 stakken. Ændr én `at`-værdi, og hele kompositionen balancerer om.

## Trin for trin: byg din egen CSS mesh gradient

1. **Vælg en baggrund** Vælg den flade farve, der viser sig mellem pølerne. Mørke baggrunde får pøle til at gløde, lyse får dem til at ligne akvarel. Baggrunden er også din reserve, hvis gradienterne svigter.
2. **Vælg tre til fem beslægtede farver** Nabofarvetoner blandes rent. Modsætninger, som blå og orange, mødes i et gråt udtværet område. [Mudrede gradienter](https://gradiently.design/da/guide/muddy-gradients) forklarer hvorfor, og hvordan du undgår det.
3. **Placér pølerne skævt** Skub punkterne mod hjørner og kanter, og lad mindst ét ligge delvis uden for boksen, som `at 110% 0%`. Centrerede pøle ligner en skydeskive.
4. **Variér rækkevidde og styrke** Giv én farve den største falmning og den højeste alfa, så den fører. Hold accenten lille og svagere. Lige store pøle ser mekaniske ud.
5. **Bland i et bedre farverum** Tilføj `in oklab` til hvert lag, som i `radial-gradient(in oklab circle at 15% 20%, ...)`, hvor det understøttes. Overlapninger forbliver lysere end i sRGB.
6. **Afslut med korn** Store bløde falmninger får bånd på mange skærme. Et svagt støjlag retter det og tilføjer en trykt fornemmelse. Se nedenfor.

## Blødere blandinger med sløring

Radiale falmninger er bløde, men deres former er tydeligt runde. En sløring blødgør cirklerne til noget mere organisk. Læg lagene på et pseudoelement, slør det, og gør det for stort med en negativ `inset`, så de slørede kanter ikke falmer ind i siden. `isolation: isolate` holder den negative `z-index` inde 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);
}
```

En sløret mesh på et pseudoelement. Tekst inde i `.mesh` forbliver skarp, fordi kun pseudoelementet er sløret.

> **Sløring er den dyre del** En statisk sløring tegnes én gang og er som regel fin. Et sløret lag, der bevæger sig eller ændrer størrelse, gentegnes hver frame, og store sløringsradier i fuld skærm koster mest. Se [ydeevne for CSS-gradienter](https://gradiently.design/da/guide/css-gradient-performance).

## Sådan tilføjer du korn til en CSS mesh gradient

Korn gør to ting. Det bryder de synlige trin op, der opstår i brede fades med lav kontrast, og det giver fladen den taktile, filmagtige kvalitet, der får gradienter til at se overvejede ud frem for standard. I CSS er den sædvanlige kilde et SVG-`feTurbulence`-filter brugt som et lille baggrundsbillede, lagt øverst med lav opacity. Hele teknikken står i [CSS-støjtekstur](https://gradiently.design/da/guide/css-noise-texture), og designbegrundelsen i [kornede gradienter](https://gradiently.design/da/guide/grainy-gradients).

### Uden korn

- Synlige ringe i mørke områder på mange skærme
- Fladen læses som en flad skærmfarve
- Ligner en skabelonstandard

### Med svagt korn

- Trinene brydes op og forsvinder
- Fladen læses som papir, film eller tryk
- Føles bevidst og færdig

## Animér en mesh gradient

Gradientpositioner kan ikke animeres alene, men registrerede brugerdefinerede egenskaber kan. Deklarér hver bevægelig koordinat med `@property`, brug den inde i gradienten, og animér egenskaben. Hold bevægelsen langsom, og slå den fra for folk, der beder om [reduceret bevægelse](https://gradiently.design/da/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, der driver hen over toppen. Tilføj en anden egenskab for hver koordinat, du vil flytte.

Hver frame i denne animation gentegner hele baggrunden. På et lille kort er det trivielt. På en helskærmshero er det værd at måle. Guiden om [animeret gradient](https://gradiently.design/da/guide/css-animated-gradient) dækker billigere alternativer som at flytte et overstort lag med `transform`.

## Hvornår du skal bruge et billede eller WebGL i stedet

| Fremgangsmåde | Bedst til | Vær opmærksom på |
| --- | --- | --- |
| Lagdelte CSS-gradienter | Statiske baggrunde, kort, heroer med tre til fem farver | Runde pøle, banding uden korn |
| CSS med sløring | Blødere, mere organiske statiske felter | Gentegningspris, hvis den animeres eller ofte ændrer størrelse |
| Eksporteret billede (AVIF eller WebP) | Komplekse meshes med mange punkter eller maleriske former | Filvægt og et fast udsnit pr. format |
| Videoløkke | Rig bevægelse i en hero | Filstørrelse, regler for autoplay, reduceret bevægelse |
| WebGL-shader | Fuld skærm, flydende, interaktiv bevægelse | Kodekompleksitet, batteriforbrug, reserver |

Vælg det letteste værktøj, der stadig ser rigtigt ud.

Shadere dækkes i [WebGL-gradienter](https://gradiently.design/da/guide/shader-gradients). En mellemvej er at designe baggrunden én gang som et levende materiale og eksportere den: Marks i Gradiently er mesh-lignende materialer med farve, korn, lys og bevægelse, og et design lavet med ét eksporteres som PNG, JPEG eller en sømløs videoløkke på 5 til 30 sekunder.

Et Mark: farvepøle, materiale og korn gengivet live og ikke efterlignet med lag.

## FAQ

### Kan man lave en mesh gradient med ren CSS?

Ikke indbygget, men at stable tre til fem radiale gradienter, der falmer til gennemsigtig, oven på en basisfarve giver en overbevisende mesh. En sløring og et støjlag færdiggør den.

### Hvor mange radiale gradienter behøver en CSS-mesh?

Tre til fem er som regel nok. Færre ligner et simpelt skær, flere bliver let mudrede og sværere at balancere.

### Hvorfor ser min CSS mesh gradient mudret ud?

Modsatte farvetoner, der mødes i sRGB, blander gennem gråt. Brug nabofarver, reducér overlapningen, eller tilføj `in oklab` til hvert lag.

### Er en CSS mesh gradient dårlig for ydeevnen?

En statisk er billig. Omkostningerne stiger med store sløringsfiltre og med animation, fordi baggrunden gentegnes hver frame.

### Understøtter SVG mesh-gradienter?

Mesh-gradienter blev udkastet til SVG 2, men browsere implementerede dem aldrig, så på nettet efterligner du dem med lag, bruger et billede eller gengiver dem med WebGL.