# Liukuvärin väripysäkit: sijoittele värit tasaisiksi

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

Kaksi liukuväriä samoilla väreillä voi näyttää täysin erilaisilta. Ero on pysäkkien paikoissa ja niiden välisessä kulussa. Tätä liukuvärin osaa useimmat eivät koskaan säädä.

## The short version

- Liukuvärin väripysäkit ovat kohtia, joissa saavutetaan tietty väri, kirjoitettuina väriksi ja sijainniksi kuten `#7c3aed 40%`.
- Ilman sijainteja pysäkit jaetaan tasaisesti, mikä näyttää harvoin luonnollisimmalta.
- Siirtymävihje on kahden pysäkin välinen yksittäinen prosenttiarvo, joka siirtää sekoituksen puoliväliä lisäämättä väriä.
- Kaksi pysäkkiä samassa sijainnissa tekee jyrkän reunan; näin CSS:llä syntyvät raidat ja terävät kaistat.
- Useat pehmennyskäyrää seuraavat välipysäkit poistavat lineaarisen häivytyksen alun ja lopun näkyvän rajan.

**Liukuvärin väripysäkit** ovat kohtia, joissa liukuväri saavuttaa tietyn värin. CSS:ssä pysäkki on väri ja valinnainen sijainti, kuten `#7c3aed 40%`, ja selain sekoittaa vierekkäiset pysäkit suoraviivaisesti. Sijainti määrää lähes kaiken: pehmeyden tai äkillisyyden, hallitsevan värin ja häivytyksen alun näkyvän sauman. Pysäkkien siirto parantaa usein enemmän kuin värien vaihto.

## Miten liukuvärin väripysäkit toimivat

Liukuväriviiva kulkee 0 prosentista 100 prosenttiin. Pysäkki kiinnittää värin sen pisteeseen. Ilman sijainteja selain jakaa pysäkit tasaisesti, joten kolme väriä osuvat 0, 50 ja 100 prosenttiin. Jokaisen parin välillä väri muuttuu vakionopeudella. Täysi syntaksi löytyy [MDN:n linear-gradient()-ohjeesta](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient).

| Kirjoitat | Tulos |
| --- | --- |
| `#1e3a8a, #f472b6` | Kaksi pysäkkiä kohdissa 0% ja 100% |
| `#1e3a8a 20%, #f472b6 80%` | Tasainen laivastonsininen 20% asti, siirtymä, tasainen vaaleanpunainen 80% jälkeen |
| `#1e3a8a, 30%, #f472b6` | Siirtymävihje: puoliväli siirtyy 30% kohtaan |
| `#1e3a8a 50%, #f472b6 50%` | Jyrkkä reuna keskellä, ei sekoitusta |
| `#1e3a8a 0 40%, #f472b6 40% 100%` | Kaksoissijainti: kaksi tasaista kaistaa |
| `#1e3a8a 10px, #f472b6 200px` | Pituudet toimivat prosenttien tavoin |

CSS-pysäkkisyntaksi. Samat ajatukset pätevät Figmaan, Photoshopiin ja muihin liukuvärieditoreihin liukusäätimillä.

## Miksi tasaiset pysäkkivälit näyttävät keinotekoisilta

Aito valo muuttuu harvoin tasaisesti. Auringonlasku on enimmäkseen yhtä väriä ja kapea muutoskaista horisontissa; varjo enimmäkseen välisävyä lyhyellä reunasiirtymällä. Tasaiset välit antavat kaikille saman osuuden ja näyttävät kaaviolta. Valitse johtava väri ja anna sille eniten tilaa.

- Tasainen: 0, 50, 100: `linear-gradient(180deg, #0c4a6e 0%, #f59e0b 50%, #be123c 100%)`
- Painotettu: sininen johtaa: `linear-gradient(180deg, #0c4a6e 0%, #0e7490 58%, #f59e0b 84%, #be123c 100%)`
- Painotettu: lämmin yläosa: `linear-gradient(180deg, #0c4a6e 0%, #f59e0b 22%, #be123c 40%, #4c0519 100%)`

Yksi paletti, kolme sijoittelua. Painotetut versiot tuntuvat taivaalta kahtena hetkenä, tasainen tuotetulta.

## Siirtymävihjeet: puolivälin siirtäminen

Siirtymävihje on kahden pysäkin väliin asetettu pelkkä prosenttiarvo. Se ei lisää väriä vaan siirtää täsmällistä puoliväriä. 20 prosentin vihje tarkoittaa varhaista puoliväliä: toinen väri saapuu nopeasti ja viipyy pitkään. Vihje on kevein keino tehdä kahden värin liukuväristä vähemmän mekaaninen.

- Ei vihjettä, puoliväli 50%: `linear-gradient(90deg, #4c1d95, #f9a8d4)`
- Vihje kohdassa 25%: `linear-gradient(90deg, #4c1d95, 25%, #f9a8d4)`
- Vihje kohdassa 75%: `linear-gradient(90deg, #4c1d95, 75%, #f9a8d4)`

Sama violetti ja vaaleanpunainen. Vihjeen siirto nostaa toisen hallitsevaksi muuttamatta värejä.

## Jyrkät pysäkit raitoihin ja kaistoihin

Samassa sijainnissa olevien pysäkkien välissä ei ole sekoitusmatkaa, joten väri vaihtuu heti. Näin piirretään raidat, jaetut taustat, edistymispalkit ja liput pelkällä liukuvärillä. Kaksoissijainti `colour start end` lyhentää kirjoitusta. Toistuvat liukuvärit monistavat saman ajatuksen, kuten [toistuvat lineaariset liukuvärit](https://gradiently.design/fi/guide/css-repeating-gradient) kertoo.

- Puolet ja puolet: `linear-gradient(90deg, #0f172a 0 50%, #f8fafc 50% 100%)`
- Kolme kaistaa: `linear-gradient(180deg, #fde68a 0 33%, #fb923c 33% 66%, #e11d48 66% 100%)`
- Vinot portaat: `linear-gradient(135deg, #312e81 0 40%, #6d28d9 40% 60%, #c084fc 60% 100%)`

Jyrkät pysäkit käytössä. Ei sekoitusta, vain reunoja.

## Pehmennetyt pysäkit poistavat sauman

Lineaarisella sekoituksella on näkyvä alku ja loppu. Valokuvan tumma peite häipyy läpinäkyväksi, mutta aloitusraja näkyy usein, koska muutosnopeus hyppää nollasta täyteen. Useat pehmennyskäyrän välipysäkit korjaavat sen: muutos alkaa hitaasti, kiihtyy ja rauhoittuu. Tämä auttaa erityisesti tekstipeitteissä ja [läpinäkyvissä liukuväreissä](https://gradiently.design/fi/guide/css-gradient-transparent).

```css
/* Linear: a visible edge where the fade starts */
.scrim-linear {
  background: linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.8) 100%);
}

/* Eased: stops follow an ease in out curve, no edge */
.scrim-eased {
  background: linear-gradient(180deg,
    rgba(10, 12, 20, 0) 40%,
    rgba(10, 12, 20, 0.02) 46%,
    rgba(10, 12, 20, 0.08) 52%,
    rgba(10, 12, 20, 0.18) 58%,
    rgba(10, 12, 20, 0.32) 66%,
    rgba(10, 12, 20, 0.48) 74%,
    rgba(10, 12, 20, 0.62) 82%,
    rgba(10, 12, 20, 0.73) 91%,
    rgba(10, 12, 20, 0.8) 100%);
}
```

Molemmat tummennukset päättyvät samaan voimakkuuteen. Pehmennetyn alussa ei näy rajaa.

> **Sama ajatus liikkeessä** Pehmennetyt pysäkit ovat liukuvärin vastine animaation pehmennyskäyrälle. [Liikkeen pehmennys](https://gradiently.design/fi/guide/easing) kertoo, miksi pehmeä alku ja loppu tuntuvat luonnollisilta; sama ajatus pätee tässä.

## Pysäkkien sijoittelu käytännössä

1. **Valitse johtava väri** Anna sille 50-70 prosenttia viivasta. Se määrää tunnelman.
2. **Sijoita muutos katseen kohteeseen** Aseta nopein värimuutos lähelle kiintopistettä, älä oletuksena keskelle.
3. **Lisää vihjeitä ennen värejä** Jos sekoitus tuntuu väärältä, siirrä ensin puoliväliä. Lisävärit lisäävät mutkikkuutta.
4. **Tarkista puolivärit** Katso jokaisen parin puoliväri. Jos se on harmaa, lisää väliväri tai sekoita OKLCH:ssa, kuten [liukuvärin interpolointi](https://gradiently.design/fi/guide/gradient-interpolation) selittää.
5. **Pehmennä pitkät häivytykset** Lisää välipysäkkejä läpinäkyväksi tai tasaiseksi väriksi häipyviin pintoihin, jotta saumaa ei näy.

### Vältä

- Samaa osuutta jokaiselle värille
- Uutta väriä joka ongelman korjaukseen
- Lineaarisia läpinäkyvyysliukuja tekstin takana
- Jyrkkiä pysäkkejä pehmeän siirtymän paikalla

### Tee näin

- Yksi johtava väri, muut tulevat myöhään
- Siirtymävihjeet sekoituksen säätöön
- Pehmennetyt pysäkit tummennuksiin ja häivytyksiin
- Jyrkät pysäkit vain raitoihin ja kaistoihin

[CSS:n lineaariset liukuvärit](https://gradiently.design/fi/guide/css-linear-gradient) esittelee pysäkit yksinkertaisimmillaan ja koko syntaksin, ja [liukuvärityypit](https://gradiently.design/fi/guide/types-of-gradients) näyttää niiden toiminnan säteittäisissä ja kartiomaisissa liukuväreissä. Gradientlyssä Mark hoitaa sekoituksensa ja valonsa joka koossa, joten voit suunnitella heti ja käyttää ajan sanoihin.

## FAQ

### Mikä on liukuvärin väripysäkki?

Liukuvärin piste, jossa saavutetaan tietty väri. CSS:ssä se kirjoitetaan värinä ja valinnaisena sijaintina, kuten `#7c3aed 40%`.

### Mitä tapahtuu ilman pysäkkien sijainteja?

Selain jakaa ne tasaisesti 0 prosentista 100 prosenttiin. Kolme väriä osuu 0, 50 ja 100 prosenttiin.

### Mikä on CSS-liukuvärin siirtymävihje?

Yksittäinen prosenttiarvo kahden pysäkin välissä, kuten `#4c1d95, 25%, #f9a8d4`. Se siirtää sekoituksen puoliväliä lisäämättä väriä.

### Miten teen CSS-liukuväriin terävän rajan?

Anna kahdelle pysäkille sama sijainti, esimerkiksi `#0f172a 50%, #f8fafc 50%`, tai käytä kaksoissijaintia `#0f172a 0 50%, #f8fafc 50% 100%`.

### Miten häivytän liukuvärin pehmeästi läpinäkyväksi?

Lisää useita välipysäkkejä, joiden peittävyys seuraa pehmeän alun ja lopun käyrää. Yksinkertaisen kahden pysäkin liu'un alussa näkyy usein raja.