# CSS mesh-gradient: så bygger du en av radiella lager

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

Det finns ingen mesh-gradient() i CSS. Här är lagermetoden som fejkar en på ett övertygande sätt, oskärpan och kornet som gör den färdig, och när en bild eller en shader är det bättre valet.

## The short version

- CSS har ingen inbyggd mesh-gradientfunktion, så en mesh-gradient i CSS byggs genom att stapla flera radiella gradienter över en enfärgad basfärg.
- Varje lager är en pöl av färg på sin egen position som tonar ut till transparent, och överlappningarna skapar den mjuka övergången åt flera håll som är typisk för en mesh.
- Ett oskärpefilter på ett pseudoelement mjukar upp pölarna ytterligare, och ett svagt brusskikt döljer banding.
- Statiska lagerlagda gradienter är billiga att rendera, men stora oskärpor och animerade lager ritas ofta om och bör hållas långsamma, små eller valfria.
- När en design behöver många färgpunkter, förvridna former eller mjuk rörelse i helskärm är en exporterad bild, video eller WebGL-shader oftast det bättre verktyget.

En **mesh-gradient i CSS** är en bakgrund där färg blandas åt flera håll samtidigt, som om pölar av pigment hade sugit in i varandra. CSS har ingen mesh-funktion, och de mesh-gradienter som en gång utkastades för SVG kom aldrig i webbläsarna, så webbversionen är en fejk: tre till fem `radial-gradient()`-lager staplade över en enfärgad yta, vart och ett tonar ut till `transparent`. Gjord med omsorg är den nära nog att ingen märker skillnaden, väger några hundra byte och förblir skarp i alla storlekar.

Om du vill ha designteorin först, vad en mesh är och varför den känns organisk, läs [mesh-gradienter](https://gradiently.design/sv/guide/mesh-gradients). Den här guiden handlar om att bygga en i kod.

## Så fungerar lagermetoden

Varje lager är en färgpunkt. Dess position är `at`-värdet, dess räckvidd är toningsavståndet och dess styrka är färgens alfa. Eftersom den första gradienten i `background-image` målas överst spelar ordningen mindre roll här än du kanske tror: varje lager är mestadels genomskinligt, så de blandas där de överlappar. Bas-`background-color` syns igenom överallt där ingen pöl når.

- Pöl 1: violett, uppe till vänster: `radial-gradient(circle at 15% 20%, #7c3aed, #0b1026 55%)`
- Pöl 2: rosa, uppe till höger: `radial-gradient(circle at 85% 25%, #ec4899, #0b1026 50%)`
- Pöl 3: cyan, nedtill: `radial-gradient(ellipse at 60% 90%, #06b6d4, #0b1026 60%)`
- Pöl 4: bärnstensaccent: `radial-gradient(circle at 25% 80%, #f59e0b, #0b1026 45%)`

De fyra färgpunkterna i en mesh, var och en visad ensam på den marina basen. Staplade blandas de till ett enda fält.

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

Hela stapeln. Ändra ett `at`-värde så balanseras hela kompositionen om.

## Steg för steg: bygg din egen mesh-gradient i CSS

1. **Välj en botten** Välj den enfärgade yta som syns mellan pölarna. Mörka bottnar får pölarna att glöda, ljusa bottnar får dem att kännas som akvarell. Bottnen är också din reserv om gradienterna misslyckas.
2. **Välj tre till fem besläktade färger** Angränsande nyanser blandas rent. Motsatser, som blått och orange, möts i en grå utsmetning. [Sladdriga gradienter](https://gradiently.design/sv/guide/muddy-gradients) förklarar varför och hur du undviker det.
3. **Placera pölarna utanför mitten** Skjut punkterna mot hörn och kanter och låt minst en ligga delvis utanför rutan, som `at 110% 0%`. Centrerade pölar ser ut som en måltavla.
4. **Variera räckvidd och styrka** Ge en färg den största toningen och den högsta alfan så att den leder. Håll accenten liten och svagare. Lika stora pölar ser mekaniska ut.
5. **Blanda i ett bättre färgrum** Lägg till `in oklab` i varje lager, som i `radial-gradient(in oklab circle at 15% 20%, ...)`, där det stöds. Överlappningarna förblir ljusare än i sRGB.
6. **Avsluta med korn** Stora mjuka toningar får band på många skärmar. Ett svagt brusöverlägg åtgärdar det och ger en tryckt känsla, se nedan.

## Mjukare övergångar med oskärpa

Radiella toningar är mjuka men deras former är tydligt runda. En oskärpa mjukar upp cirklarna till något mer organiskt. Lägg lagren på ett pseudoelement, sudda det och gör det överdimensionerat med en negativ `inset` så att de suddade kanterna inte tonar ut mot sidan. `isolation: isolate` håller det negativa `z-index` inuti 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 suddad mesh på ett pseudoelement. Text inuti `.mesh` förblir skarp eftersom bara pseudoelementet suddas.

> **Oskärpan är den dyra delen** En statisk oskärpa målas en gång och är oftast bra. Ett suddat lager som rör sig eller ändrar storlek ritas om varje bildruta, och stora oskärperadier i helskärm kostar mest. Se [prestanda för CSS-gradienter](https://gradiently.design/sv/guide/css-gradient-performance).

## Att lägga korn på en mesh-gradient i CSS

Korn gör två saker. Det bryter upp de synliga steg som uppstår i breda toningar med låg kontrast, och det ger ytan den taktila, filmlika kvalitet som får gradienter att se genomtänkta ut snarare än standard. I CSS är den vanliga källan ett SVG-filter med `feTurbulence`, använt som en liten bakgrundsbild och lagt överst med låg opacitet. Hela tekniken finns i [brustextur i CSS](https://gradiently.design/sv/guide/css-noise-texture), och designresonemanget i [kornig gradient](https://gradiently.design/sv/guide/grainy-gradients).

### Utan korn

- Synliga ringar i mörka områden på många skärmar
- Ytan läses som en platt skärmfärg
- Ser ut som en mallstandard

### Med svagt korn

- Stegen bryts upp och försvinner
- Ytan läses som papper, film eller tryck
- Känns avsiktlig och färdig

## Att animera en mesh-gradient

Gradientpositioner kan inte animeras var för sig, men registrerade egna egenskaper kan. Deklarera varje rörlig koordinat med `@property`, använd den inuti gradienten och animera egenskapen. Håll rörelsen långsam och stäng av den för dem som ber om [reducerad rörelse](https://gradiently.design/sv/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; }
}
```

En pöl som driver över toppen. Lägg till en andra egenskap för varje koordinat du vill flytta.

Varje bildruta i den här animationen ritar om hela bakgrunden. På ett litet kort är det försumbart, på en helskärmshero är det värt att mäta. Guiden om [animerade gradienter](https://gradiently.design/sv/guide/css-animated-gradient) tar upp billigare alternativ, som att flytta ett överdimensionerat lager med `transform`.

## När du ska använda en bild eller WebGL i stället

| Metod | Bäst för | Se upp med |
| --- | --- | --- |
| Lagerlagda CSS-gradienter | Statiska bakgrunder, kort, hero-ytor med tre till fem färger | Runda pölar, banding utan korn |
| CSS med oskärpa | Mjukare, mer organiska statiska fält | Omritningskostnad om den animeras eller ändrar storlek ofta |
| Exporterad bild (AVIF eller WebP) | Komplexa mesh med många punkter eller målerika former | Filvikt och ett fast beskärningsutsnitt per format |
| Videoloop | Rik rörelse i en hero | Filstorlek, regler för autouppspelning, reducerad rörelse |
| WebGL-shader | Flytande, interaktiv rörelse i helskärm | Kodkomplexitet, batteriåtgång, reservlösningar |

Välj det lättaste verktyg som fortfarande ser rätt ut.

Shaders tas upp i [WebGL-gradienter](https://gradiently.design/sv/guide/shader-gradients). En mellanväg är att designa bakgrunden en gång som ett levande material och exportera den: Gradiently Marks är meshliknande material med färg, korn, ljus och rörelse, och en design gjord med en exporteras som PNG, JPEG eller en sömlös videoloop på 5 till 30 sekunder.

En Mark: färgpölar, material och korn renderade live i stället för approximerade med lager.

## FAQ

### Kan man göra en mesh-gradient med enbart CSS?

Inte inbyggt, men att stapla tre till fem radiella gradienter som tonar ut till transparent över en basfärg ger en övertygande mesh. En oskärpa och ett brusskikt gör den färdig.

### Hur många radiella gradienter behöver en mesh i CSS?

Tre till fem räcker oftast. Färre ser ut som ett enkelt sken, fler tenderar att bli sladdriga och svårare att balansera.

### Varför ser min mesh-gradient i CSS sladdrig ut?

Motsatta nyanser som möts i sRGB blandas via grått. Använd angränsande färger, minska överlappningen eller lägg till `in oklab` i varje lager.

### Är en mesh-gradient i CSS dålig för prestandan?

En statisk är billig. Kostnaderna stiger med stora oskärpefilter och med animation, eftersom bakgrunden ritas om varje bildruta.

### Stöder SVG mesh-gradienter?

Mesh-gradienter utkastades för SVG 2 men webbläsare implementerade dem aldrig, så på webben fejkar du dem med lager, använder en bild eller renderar dem med WebGL.