# CSS mesh-liukuväri: näin rakennat sen säteittäisistä kerroksista

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

CSS:ssä ei ole mesh-gradient()-funktiota. Tässä kerrostamistapa, joka jäljittelee sitä vakuuttavasti, sumennus ja rakeisuus, jotka viimeistelevät sen, ja milloin kuva tai shader on parempi valinta.

## The short version

- CSS:ssä ei ole omaa mesh-liukuvärifunktiota, joten CSS mesh -liukuväri rakennetaan pinoamalla useita säteittäisiä liukuvärejä tasaisen pohjavärin päälle.
- Jokainen kerros on oma värilammikkonsa omassa kohdassaan, joka häipyy läpinäkyväksi, ja päällekkäisyydet luovat meshin pehmeän, moneen suuntaan kulkevan sekoituksen.
- Pseudoelementin sumennussuodatin pehmentää lammikoita vielä lisää, ja himmeä kohinakerros piilottaa juovittumisen.
- Staattiset kerrostetut liukuvärit piirtyvät kevyesti, mutta suuret sumennukset ja animoidut kerrokset piirtyvät usein uudelleen, joten ne kannattaa pitää hitaina, pieninä tai valinnaisina.
- Kun suunnitelma tarvitsee monta värikohtaa, vääntyneitä muotoja tai sujuvaa liikettä koko ruudulla, viety kuva, video tai WebGL-shader on yleensä parempi työkalu.

**CSS mesh -liukuväri** on tausta, jossa väri sekoittuu useaan suuntaan yhtä aikaa, ikään kuin pigmenttilammikot olisivat imeytyneet toisiinsa. CSS:ssä ei ole mesh-funktiota, ja SVG:lle luonnostellut mesh-liukuvärit eivät koskaan päätyneet selaimiin, joten verkkoversio on jäljitelmä: kolmesta viiteen `radial-gradient()`-kerrosta pinottuna tasaisen värin päälle, kukin häipyen väriin `transparent`. Huolella tehtynä se on riittävän lähellä, ettei kukaan erota eroa, painaa muutaman sata tavua ja pysyy terävänä kaikissa kooissa.

Jos haluat teoriaa ensin, eli mikä mesh on ja miksi se tuntuu orgaaniselta, lue [mesh-liukuvärit](https://gradiently.design/fi/guide/mesh-gradients). Tämä opas käsittelee sen rakentamista koodilla.

## Miten kerrostamistapa toimii

Jokainen kerros on yksi värikohta. Sen paikka on `at`-arvo, sen ulottuvuus on häipymämatka ja sen voimakkuus on värin alfa. Koska `background-image`n ensimmäinen liukuväri piirretään päälle, järjestyksellä on täällä vähemmän merkitystä kuin luulisi: jokainen kerros on enimmäkseen läpinäkyvä, joten ne sekoittuvat päällekkäisissä kohdissa. Pohjan `background-color` näkyy kaikkialla, minne yksikään lammikko ei yllä.

- Lammikko 1: violetti, vasen ylä: `radial-gradient(circle at 15% 20%, #7c3aed, #0b1026 55%)`
- Lammikko 2: pinkki, oikea ylä: `radial-gradient(circle at 85% 25%, #ec4899, #0b1026 50%)`
- Lammikko 3: syaani, alhaalla: `radial-gradient(ellipse at 60% 90%, #06b6d4, #0b1026 60%)`
- Lammikko 4: meripihkan korostus: `radial-gradient(circle at 25% 80%, #f59e0b, #0b1026 45%)`

Yhden meshin neljä värikohtaa, kukin yksinään laivastonsinisellä pohjalla. Pinottuina ne sekoittuvat yhdeksi kentäksi.

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

Koko pino. Muuta yhtä `at`-arvoa, ja koko sommitelma tasapainottuu uudelleen.

## Vaihe vaiheelta: rakenna oma CSS mesh -liukuväri

1. **Valitse pohja** Valitse tasainen väri, joka näkyy lammikoiden välissä. Tummilla pohjilla lammikot hehkuvat, vaaleilla ne tuntuvat vesiväreiltä. Pohja on myös varavärisi, jos liukuvärit eivät toimi.
2. **Valitse kolmesta viiteen toisiinsa sopivaa väriä** Naapurisävyt sekoittuvat puhtaasti. Vastakohdat, kuten sininen ja oranssi, kohtaavat harmaana tahrana. [Mutaiset liukuvärit](https://gradiently.design/fi/guide/muddy-gradients) selittää miksi ja miten sen voi välttää.
3. **Sijoita lammikot keskustan ulkopuolelle** Työnnä pisteitä kohti kulmia ja reunoja ja anna ainakin yhden olla osittain laatikon ulkopuolella, esimerkiksi `at 110% 0%`. Keskitetyt lammikot näyttävät maalitaululta.
4. **Vaihtele ulottuvuutta ja voimakkuutta** Anna yhdelle värille suurin häipymä ja korkein alfa, jotta se johtaa. Pidä korostus pienenä ja heikompana. Yhtä suuret lammikot näyttävät mekaanisilta.
5. **Sekoita parempaan väriavaruuteen** Lisää `in oklab` jokaiseen kerrokseen, esimerkiksi `radial-gradient(in oklab circle at 15% 20%, ...)`, missä se on tuettu. Päällekkäisyydet pysyvät kirkkaampina kuin sRGB:ssä.
6. **Viimeistele rakeisuudella** Suuret pehmeät häivytykset juovittuvat monilla näytöillä. Himmeä kohinapeite korjaa sen ja tuo painetun tunnun; katso alla.

## Pehmeämmät sekoitukset sumennuksella

Säteittäiset häivytykset ovat pehmeitä, mutta niiden muodot ovat selvästi pyöreitä. Sumennus pehmentää ympyrät orgaanisemmiksi. Laita kerrokset pseudoelementille, sumenna se ja tee siitä ylisuuri negatiivisella `inset`-arvolla, jotta sumennetut reunat eivät häipyisi sivuun. `isolation: isolate` pitää negatiivisen `z-index`in komponentin sisällä.

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

Sumennettu mesh pseudoelementillä. Teksti `.mesh`in sisällä pysyy terävänä, koska vain pseudoelementti sumennetaan.

> **Sumennus on kallis osa** Staattinen sumennus piirretään kerran ja on yleensä kunnossa. Sumennettu kerros, joka liikkuu tai muuttaa kokoaan, piirtyy uudelleen joka ruudulla, ja suuret sumennussäteet koko ruudulla maksavat eniten. Katso [CSS-liukuvärin suorituskyky](https://gradiently.design/fi/guide/css-gradient-performance).

## Rakeisuuden lisääminen CSS mesh -liukuväriin

Rakeisuus tekee kaksi työtä. Se rikkoo leveissä, vähäkontrastisissa häivytyksissä näkyvät portaat ja antaa pinnalle tuntuvan, filmimäisen laadun, joka saa liukuvärit näyttämään harkituilta oletusarvojen sijaan. CSS:ssä tavallinen lähde on SVG:n `feTurbulence`-suodatin pienenä taustakuvana, kerrostettuna päälle matalalla peittävyydellä. Koko tekniikka on oppaassa [CSS-kohinatekstuuri](https://gradiently.design/fi/guide/css-noise-texture) ja suunnitteluperustelut oppaassa [rakeiset liukuvärit](https://gradiently.design/fi/guide/grainy-gradients).

### Ilman rakeisuutta

- Näkyviä renkaita tummilla alueilla monilla näytöillä
- Pinta näyttää tasaiselta näytön väriltä
- Näyttää mallipohjan oletukselta

### Himmeän rakeisuuden kanssa

- Portaat rikkoutuvat ja katoavat
- Pinta näyttää paperilta, filmiltä tai painetulta
- Tuntuu tarkoitukselliselta ja viimeistellyltä

## Mesh-liukuvärin animointi

Liukuvärin paikkoja ei voi animoida sellaisenaan, mutta rekisteröidyt mukautetut ominaisuudet voi. Määrittele jokainen liikkuva koordinaatti `@property`:lla, käytä sitä liukuvärin sisällä ja animoi ominaisuutta. Pidä liike hitaana ja kytke se pois niiltä, jotka pyytävät [vähennettyä liikettä](https://gradiently.design/fi/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; }
}
```

Yksi lammikko ajelehtii yläreunaa pitkin. Lisää toinen ominaisuus jokaista liikutettavaa koordinaattia kohti.

Tämän animaation jokainen ruutu piirtää koko taustan uudelleen. Pienellä kortilla se on vähäpätöistä, koko ruudun hero-alueella se kannattaa mitata. Opas [animoitu liukuväri](https://gradiently.design/fi/guide/css-animated-gradient) käsittelee halvempia vaihtoehtoja, kuten ylisuuren kerroksen liikuttamisen `transform`illa.

## Milloin käyttää kuvaa tai WebGL:ää

| Tapa | Sopii parhaiten | Varo |
| --- | --- | --- |
| Kerrostetut CSS-liukuvärit | Staattiset taustat, kortit, hero-alueet kolmella tai viidellä värillä | Pyöreältä näyttävät lammikot, juovittuminen ilman rakeisuutta |
| CSS sumennuksella | Pehmeämmät, orgaanisemmat staattiset kentät | Uudelleenpiirron hinta, jos animoidaan tai koko muuttuu usein |
| Viety kuva (AVIF tai WebP) | Monimutkaiset meshit, joissa on monta pistettä tai maalauksellisia muotoja | Tiedostopaino ja kiinteä rajaus jokaiselle formaatille |
| Videosilmukka | Rikas liike hero-alueella | Tiedostokoko, automaattisen toiston säännöt, vähennetty liike |
| WebGL-shader | Koko ruudun, virtaava, vuorovaikutteinen liike | Koodin monimutkaisuus, akun kulutus, varavaihtoehdot |

Valitse kevein työkalu, joka vielä näyttää oikealta.

Shaderit käsitellään oppaassa [WebGL-liukuvärit](https://gradiently.design/fi/guide/shader-gradients). Välimuoto on suunnitella tausta kerran elävänä materiaalina ja viedä se: Gradientlyn Markit ovat mesh-tyyppisiä materiaaleja, joissa on väri, rakeisuus, valo ja liike, ja niillä tehty suunnitelma viedään PNG- tai JPEG-kuvana tai saumattomana videosilmukkana, jonka kesto on viidestä kolmeenkymmeneen sekuntia.

Mark: värilammikot, materiaali ja rakeisuus piirrettynä elävästi kerrosten jäljittelyn sijaan.

## FAQ

### Voiko mesh-liukuvärin tehdä pelkällä CSS:llä?

Ei natiivisti, mutta kolmen tai viiden läpinäkyväksi häipyvän säteittäisen liukuvärin pinoaminen pohjavärin päälle antaa vakuuttavan meshin. Sumennus ja kohinakerros viimeistelevät sen.

### Montako säteittäistä liukuväriä CSS meshiin tarvitaan?

Kolme tai viisi riittää yleensä. Vähemmän näyttää yksinkertaiselta hehkulta, enemmän muuttuu herkästi mutaiseksi ja vaikeammin tasapainotettavaksi.

### Miksi CSS mesh -liukuväri näyttää mutaiselta?

Vastakkaiset sävyt kohtaavat sRGB:ssä harmaan kautta. Käytä naapurivärejä, vähennä päällekkäisyyttä tai lisää `in oklab` jokaiseen kerrokseen.

### Onko CSS mesh -liukuväri huono suorituskyvylle?

Staattinen on kevyt. Kustannukset kasvavat suurilla sumennussuodattimilla ja animaatiolla, koska tausta piirtyy uudelleen joka ruudulla.

### Tukeeko SVG mesh-liukuvärejä?

Mesh-liukuvärit luonnosteltiin SVG 2:een, mutta selaimet eivät koskaan toteuttaneet niitä, joten verkossa niitä jäljitellään kerroksilla, käytetään kuvaa tai renderöidään WebGL:llä.