# Nestemäinen liukuväri: väri, joka näyttää kaadetulta

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

Nestemäiset liukuvärit näyttävät kankaalle kaadetulta maalilta tai vedessä kiertyvältä musteelta. Ne syntyvät värinauhoja taivuttamalla, eivät sekoittamalla. Näin teet ne.

## The short version

- Nestemäinen liukuväri näyttää kaadetulta, sillä sen värit säilyvät erillisinä taipuvina, kiertyvinä, kapenevina ja levenevinä nauhoina tasaisen häipymisen sijaan.
- Tavallinen tapa tehdä sellainen on aloittaa suorista väriraidoista ja vääristää niitä taivutus-, nesteytys- tai siirtymäsuotimella.
- Verkossa feTurbulence- ja feDisplacementMap-toiminnot yhdistävä SVG-suodin voi muuttaa raidallisen CSS-liukuvärin marmoroiduksi, nestemäiseksi pinnaksi.
- Ohuet kirkkaat nauhat kaarteissa näyttävät märän pinnan valolta ja tekevät vaikutelmasta paljon uskottavamman.
- Nestemäiset liukuvärit ovat levottomia, joten teksti tarvitsee rauhallisen alueen tai suuren yksinkertaisen muodon, jossa virtaus hidastuu.

**Nestemäinen liukuväri** näyttää kaadetulta väriltä: sävynauhat kiertyvät toistensa ympärille, venyvät ohuiksi yhdessä kohdassa ja kerääntyvät toisaalle, kaarteissa välähtää valo. Ajattele akryylivalumaalauksia, marmoroituja esilehtiä, öljyä märällä tiellä tai veteen pudotettua mustetta. Yllättävää on valmistustapa. Et sekoita värejä, vaan aloitat selkeillä raidoilla ja taivutat niitä. Siksi tavallinen liukuvärityökalu ei yksin tuota aivan samaa ilmettä.

## Mikä saa värin näyttämään nestemäiseltä

- **Nauhoja häipymisen sijaan.** Jokainen väri säilyttää identiteettinsä nauhana. Leveä pehmeä häipyminen näyttää ilmalta, ei nesteeltä.
- **Vaihtuva paksuus.** Sama nauha paisuu ja kapenee kulkiessaan virtaavan maalin tavoin.
- **Ei kulmia.** Jokainen käännös on kaari. Yksi terävä kulma rikkoo illuusion.
- **Valoa kaarteissa.** Ohut vaalea viiva muutamassa reunassa näyttää märältä heijastukselta.
- **Yksi virtaussuunta.** Samaan suuntaan kallistuvat pyörteet tuntuvat yhdeltä kaadolta.

## Neljä nestemäistä liukuväri-ilmettä

Nämä näytteet ovat raaka-ainetta: taivutettavia värinauhoja. Jokainen on yksi CSS-arvo, jonka voit kopioida lähtökohdaksi mille tahansa alla olevalle menetelmälle.

- Akryylivalun nauhat: `repeating-linear-gradient(115deg, #1e1b4b 0%, #4f46e5 6%, #f472b6 11%, #fde68a 14%, #1e1b4b 20%)`
- Marmoriraidat: `repeating-linear-gradient(80deg, #f5f5f4 0%, #e7e5e4 7%, #a8a29e 9%, #f5f5f4 12%, #d6d3d1 18%)`
- Öljyläikkä: `conic-gradient(from 30deg at 40% 55%, #0f172a, #7c3aed, #06b6d4, #a3e635, #f59e0b, #db2777, #0f172a)`
- Sula metalli: `linear-gradient(100deg, #1c1917 0%, #57534e 18%, #e7e5e4 26%, #78716c 34%, #1c1917 52%, #a8a29e 66%, #fafaf9 72%, #44403c 86%, #1c1917 100%)`

Vääristämiseen valmiit raidat. Sulassa metallissa on teräviä kirkkaita nauhoja tummien välissä. Taivutettuina niistä tulee kromin heijastuksia.

- Syvä indigo: #1e1b4b
- Ultramariini: #4f46e5
- Valupinkki: #f472b6
- Kermanvaalea heijastus: #fde68a
- Sinivihreä solu: #0d9488

Valupaletti: tumma pohja, kaksi vahvaa keskisävyä, ohuina viivoina käytetty vaalea heijastus ja yksi pienissä soluissa näkyvä tehoste.

Huomaa vaalea väri. Valumaalauksessa vaalein sävy on yleensä ohuin nauha. Se saa ympäröivät tummat värit näyttämään rikkailta. Käytä sitä heijastuksena, älä täyttönä.

## Nestemäisen liukuvärin tekeminen suunnittelutyökalulla

1. **Piirrä raidat** Täytä lopullista kokoa suurempi pinta 5-8 viistolla värinauhalla. Tee osasta leveitä ja osasta hyvin ohuita.
2. **Taivuta kokonaisuutta** Taivuta raidat leveäksi S-kaareksi taivutus-, pyörre- tai aaltovääristyksellä. Pidä ensimmäinen käsittely maltillisena.
3. **Työnnä nesteytyssiveltimellä** Vedä nauhoja yhdensuuntaisesti suurella pehmeällä siveltimellä ja luo pyörteitä sekä lammikoita. Etene suurista muodoista pieniin.
4. **Lisää muutama heijastus** Maalaa ohuita vaaleita viivoja kahteen tai kolmeen kaarteeseen virtauksen suuntaisesti pienellä peittävyydellä.
5. **Rajaa paras kohta** Vääristäminen jättää sotkuiset reunat. Rajaa kiinnostavin kohta ja mitoita käyttötarkoitukseesi.
6. **Viimeistele rakeisuudella** Kevyt kohinakerros peittää venytyksen aiheuttaman porrastumisen ja antaa pinnalle tuntua.

Ohjelmistojen nimitykset vaihtelevat, mutta useimmissa muokkaimissa on taivutus- ja nesteytys- tai tahrimistyökalu. [Photoshop-liukuvärit](https://gradiently.design/fi/guide/photoshop-gradient) ja [Procreate-liukuvärit](https://gradiently.design/fi/guide/procreate-gradient) käsittelevät kummankin omia työkaluja.

## Nestemäinen liukuväri SVG:llä ja CSS:llä

Verkossa SVG-suodin voi hoitaa taivutuksen. `feTurbulence` tuottaa tasaista kohinaa, ja `feDisplacementMap` työntää sen avulla raidallisen liukuvärin pikseleitä. Pieni `baseFrequency` tuottaa leveitä hitaita pyörteitä, suuri `scale` siirtää nauhoja pidemmälle.

```html
<svg width="0" height="0" style="position:absolute">
  <filter id="liquid" x="-20%" y="-20%" width="140%" height="140%">
    <feTurbulence type="fractalNoise" baseFrequency="0.003 0.006" numOctaves="2" seed="11" />
    <feDisplacementMap in="SourceGraphic" scale="220" xChannelSelector="R" yChannelSelector="G" />
  </filter>
</svg>

<div class="liquid"></div>

<style>
  .liquid {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: repeating-linear-gradient(115deg,
      #1e1b4b 0%, #4f46e5 6%, #f472b6 11%, #fde68a 14%, #1e1b4b 20%);
    filter: url(#liquid);
  }
</style>
```

SVG-siirtymäsuotimella taivutetut akryylivalun nauhat. Muuta seed-arvoa, niin saat samoista väreistä toisen valun.

> **Piirrä suuret pinnat kerran** Siirtymäsuotimet ovat raskaita suurilla elementeillä. Koko sivun taustaa varten piirrä tulos tarvitsemankokoiseksi kuvaksi tai pidä suodatettava elementti pienenä. [SVG:n feTurbulence](https://gradiently.design/fi/guide/svg-noise-filter) selittää parametrit, ja [WebGL-liukuvärit](https://gradiently.design/fi/guide/shader-gradients) ovat tie reaaliajassa liikkuvaan nesteeseen.

## Nestemäisten liukuvärien liikuttaminen

Nestemäinen on liukuvärityyli, joka suorastaan pyytää liikettä. Hitaasti verkkosivun pääosiossa tai tarinassa ajelehtiva valu tuntuu elävältä. Pidä nopeus pienenä kuin maali olisi paksua ja silmukoi liike niin, että loppu vastaa alkua. Turbulenssin reaaliaikainen animointi on raskasta, joten lyhyt viety videosilmukka on yleensä parempi. 8-15 sekunnin silmukka antaa valulle aikaa liikkua ilman helposti huomattavaa toistoa. 1080×1920-MP4 palvelee tarinoita, Reelsejä ja puhelimen taustakuvia yhdellä tiedostolla. [Animoidut liukuväritaustat](https://gradiently.design/fi/guide/animated-gradient-background) käsittelee kevyempiä tapoja.

## Sanat nestemäisellä liukuvärillä

### Kilpailee sanojen kanssa

- Ohuet, vahvakontrastiset nauhat otsikon takana
- Yhtä tiheät pyörteet kaikkialla
- Pieni teksti levottomimman lammikon päällä
- Kirjainten poikki kulkevat heijastukset

### Tukee sanoja

- Leveä rauhallinen nauha, jossa virtaus hidastuu
- Levottomat pyörteet reunoilla, rauha keskellä
- Suuri vahva kirjasin ja vähän sanoja
- Heijastukset poissa tekstistä

Pystyjulkaisu, jossa suuri yksittäinen sana Kaada on virtaavalla nestemäisellä liukuvärillä

Yksi sana vahvalla kirjasimella rauhallisella värialueella.

Neliömuotoinen musiikkikansi nimellä Undertow pyörteilevällä nestemäisellä liukuväritaustalla

Neliömuotoinen julkaisukansi. Nestemäinen ilme sopii musiikkiin, sillä se tuntuu näkyväksi muuttuneelta ääneltä.

Gradientlyn Markit ovat eläviä taustoja, joiden materiaalit voivat virrata ja ajelehtia. Jokainen siirtää pintansa rauhallisimman osan automaattisesti sanojesi taakse. Pro vie ne GIF-, MP4- tai WebM-muodossa, joten nestemäinen ilme voi muuttua tarinaksi tai pääosion silmukaksi ilman varjostinohjelman rakentamista. Lue luettavuudesta [tekstistä liukuvärillä](https://gradiently.design/fi/guide/text-on-gradient).

## FAQ

### Miten teen nestemäisen liukuvärin?

Piirrä väriraidat ja taivuta niitä taivutus-, pyörre- tai nesteytystyökalulla pyörteiksi. Lisää ohuita vaaleita heijastuksia muutamaan kaarteeseen ja hieman rakeisuutta.

### Voiko nestemäisen liukuvärin tehdä CSS:llä?

Useimmiten SVG:n avulla. Käytä raidalliseen CSS-liukuväriin SVG-suodinta, jossa on `feTurbulence` ja `feDisplacementMap`, taivuttaaksesi sen nestemäiseksi kuvioksi.

### Mitä eroa on nestemäisellä ja mesh-liukuvärillä?

Mesh-liukuväri sekoittaa värejä tasaisesti verkon yli. Nestemäinen liukuväri pitää värit erillisinä kaadetun maalin tavoin kiertyvinä ja venyvinä nauhoina.

### Mitkä värit toimivat nestemäisessä liukuvärissä?

Tumma pohja, kaksi vahvaa keskisävyä ja vain ohuissa nauhoissa käytetty vaalea sävy. Paksujen tummien ja ohuiden vaaleiden nauhojen kontrasti luo nestemäisen vaikutelman.