# CSS linear-gradient: täydellinen opas suoraviivaiseen liukuväriin

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

Jokainen linear-gradient()-funktion osa selitetään elävällä esimerkillä koodin vieressä: oletussuunnasta koviin pysäytyksiin, kerrostettuihin kiiltoihin ja pehmeämpiin OKLCH-sekoituksiin.

## The short version

- CSS:n suoraviivainen liukuväri on kuva, jonka selain piirtää suoraa viivaa pitkin, ja se kirjoitetaan linear-gradient()-funktiolla ja käytetään missä tahansa, mihin kuva kelpaa, yleensä background-imagessa.
- Ilman suuntaa suoraviivainen liukuväri kulkee ylhäältä alas, mikä vastaa arvoa 180deg; 0deg osoittaa ylös ja kulmat kääntyvät myötäpäivään.
- Ilman paikkoja olevat värikohdat jakautuvat tasaisesti, ja kaksi samassa kohdassa olevaa värikohtaa tekevät sekoituksen sijaan terävän reunan.
- Useita liukuvärejä voi kerrostaa yhteen background-imageen pilkuilla erotettuna, ja ensimmäinen piirretään päälle.
- Interpolaatiomenetelmä, kuten in oklch, pitää sekoituksen keskikohdan kirkkaana sen sijaan, että se harmaantuisi.

**CSS:n suoraviivainen liukuväri** (linear gradient) on kuva, jonka selain piirtää suoraa viivaa pitkin ja sekoittaa väristä toiseen. Se kirjoitetaan `linear-gradient()`-funktiolla ja sitä voi käyttää kaikkialla, missä CSS hyväksyy kuvan, useimmiten `background-image`ssa. Se ei tarvitse tiedostoa, skaalautuu mihin tahansa kokoon sumentumatta eikä maksa mitään ladata. Lyhin hyödyllinen versio on kaksi väriä: `linear-gradient(#0f172a, #38bdf8)` häipyy syvästä laivastonsinisestä ylhäällä taivaansiniseen alhaalla.

```css
.hero {
  background-color: #0f172a; /* shown if the gradient fails */
  background-image: linear-gradient(#0f172a, #38bdf8);
}
```

Yksinkertaisin suoraviivainen liukuväri: kaksi väriä, oletussuunta ja tasainen väri alla varavärinä.

Laivastonsinisestä taivaansiniseen: `linear-gradient(#0f172a, #38bdf8)`

Yllä oleva koodi piirrettynä. Ilman suuntaa liukuväri kulkee ylhäältä alas.

Tämä opas käy läpi funktion jokaisen osan siinä järjestyksessä, jossa ne vastaan tulevat. Jos haluat laajemman kuvan siitä, miten suoraviivaiset liukuvärit eroavat säteittäisistä, kartiomaisista ja mesh-sekoituksista, aloita oppaasta [liukuvärien tyypit](https://gradiently.design/fi/guide/types-of-gradients).

## linear-gradient()-funktion syntaksi

Funktio ottaa valinnaisen suunnan, valinnaisen värin interpolaatiomenetelmän ja sitten vähintään kahden värikohdan luettelon. Kaikki erotetaan pilkuilla paitsi suunta ja interpolaatiomenetelmä, jotka jakavat ensimmäisen argumentin.

| Osa | Esimerkki | Mitä se tekee |
| --- | --- | --- |
| Suunta kulmana | `135deg`, `0.25turn` | Asettaa liukuviivan kulman. 0deg osoittaa ylös, kulmat kääntyvät myötäpäivään. |
| Suunta avainsanoilla | `to right`, `to top left` | Osoittaa viivan laatikon sivulle tai kulmaan. |
| Interpolaatiomenetelmä | `in oklch`, `in srgb` | Valitsee väriavaruuden, jossa sekoitus lasketaan. |
| Värikohta | `#38bdf8 40%` | Väri ja valinnaisesti yksi tai kaksi paikkaa viivalla. |
| Värivihje | `30%` kahden värikohdan välissä | Siirtää sekoituksen puoliväliä naapureidensa välillä. |

linear-gradient()-funktion osat siinä järjestyksessä, jossa ne esiintyvät. Vain värikohdat ovat pakollisia.

Täydellinen viite löytyy [MDN:n linear-gradient()-sivulta](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient), joka dokumentoi myös tarkan kieliopin CSS Images -määrittelystä.

## Liukuvärin kulmat ja suuntaavainsanat

Kulmat noudattavat kompassia: `0deg` osoittaa ylös, `90deg` oikealle, `180deg` alas ja `270deg` vasemmalle. Liukuväri alkaa vastakkaiselta puolelta ja kulkee kohti antamaasi suuntaa, joten `90deg` kulkee vasemmalta oikealle. Voit kirjoittaa myös `turn`, `rad` tai `grad`, jossa `0.25turn` vastaa arvoa `90deg`. Oletus, kun et anna mitään, on `to bottom`.

- 0deg: alhaalta ylös: `linear-gradient(0deg, #1e1b4b, #f472b6)`
- 90deg: vasemmalta oikealle: `linear-gradient(90deg, #1e1b4b, #f472b6)`
- 180deg: oletus: `linear-gradient(180deg, #1e1b4b, #f472b6)`
- 135deg: ylävasemmalta alaoikealle: `linear-gradient(135deg, #1e1b4b, #f472b6)`

Yksi indigosta pinkkiin -pari neljässä kulmassa. Ensimmäinen väri on aina viivan alussa.

Kulmaavainsanat eivät ole sama asia kuin 45 asteen kulmat. `to top right` kallistaa viivaa niin, että keskimmäinen väri kulkee täsmälleen kahden muun kulman välistä, laatikon muodosta riippumatta. Leveällä bannerilla viiva on paljon tasaisempi kuin `45deg`, joka osoittaa aina 45 asteeseen ja ei välitä laatikon muodosta. Käytä avainsanoja, kun sekoituksen pitää kunnioittaa kulmia, ja kulmia, kun useiden eri muotoisten elementtien pitää jakaa yksi suunta. Suunnan valinnasta on lisää oppaassa [liukuvärin kulma](https://gradiently.design/fi/guide/gradient-angle).

> **Miksi kulmat täsmäävät aina** Liukuviiva venytetään niin, että sen ensimmäinen ja viimeinen väri osuvat täsmälleen kulmiin. Laatikolle, jonka leveys on W ja korkeus H kulmassa A, sen pituus on `abs(W × sin A) + abs(H × cos A)`. Siksi 135deg-liukuväri hyvin leveällä elementillä näyttää lähes vaakasuoralta.

## Värikohdat, paikat ja vihjeet

Ilman paikkaa olevat värikohdat jaetaan tasavälein, joten kolme väriä sijaitsee kohdissa 0 %, 50 % ja 100 %. Anna värikohdalle paikka prosentteina tai pituutena siirtääksesi sitä. Anna kaksi paikkaa, niin väri pysyy tasaisena niiden välillä. Laita yksinäinen prosentti kahden värikohdan väliin, ja siitä tulee vihje: piste, jossa sekoitus saavuttaa puolivälin värinsä, jolloin siirtymän toinen puoli on nopeampi kuin toinen.

```css
/* even spacing */
background-image: linear-gradient(90deg, #0c4a6e, #22d3ee, #f0f9ff);

/* a hint: the midpoint arrives early, at 20% */
background-image: linear-gradient(90deg, #0c4a6e, 20%, #22d3ee);

/* two positions: cyan holds solid from 35% to 65% */
background-image: linear-gradient(90deg, #0c4a6e, #22d3ee 35% 65%, #f0f9ff);
```

Kolme tapaa muotoilla sama sekoitus. Paikat voivat olla myös pituuksia, kuten 120px.

- Tasainen jako: `linear-gradient(90deg, #0c4a6e, #22d3ee, #f0f9ff)`
- Vihje kohdassa 20 %: `linear-gradient(90deg, #0c4a6e, 20%, #22d3ee)`
- Tasainen kaista 35 %:sta 65 %:iin: `linear-gradient(90deg, #0c4a6e, #22d3ee 35% 65%, #f0f9ff)`

Sama syvästä merestä jäähän -paletti muotoiltuna kolmella tavalla paikoilla ja vihjeillä.

## Kovat pysäytykset raidoille ja jaoille

Kun kaksi värikohtaa jakaa saman paikan, sekoitukselle ei jää tilaa, ja tuloksena on terävä reuna. Selaimet myös korjaavat värikohdan, joka tulee aiemmin kuin edellinen, mikä antaa kätevän oikotien: `#f97316 50%, #1e293b 0` tarkoittaa, että toinen väri alkaa täsmälleen siitä, mihin ensimmäinen päättyy. Toista ajatus `repeating-linear-gradient()`-funktiolla, ja sinulla on raidat.

- Jako puoliksi: `linear-gradient(90deg, #f97316 50%, #1e293b 0)`
- Kolme meripihkaista kaistaa: `linear-gradient(180deg, #fde68a 0 33%, #f59e0b 0 66%, #b45309 0)`
- Vinot varoitusraidat: `repeating-linear-gradient(45deg, #1e293b 0 12px, #f97316 12px 24px)`

Kovat pysäytykset piirtävät muotoja sekoitusten sijaan. Lisää niitä on oppaassa [CSS-kuviot](https://gradiently.design/fi/guide/css-patterns).

## Useiden liukuvärien kerrostaminen yhteen taustaan

`background-image` hyväksyy pilkuilla erotetun luettelon, ja ensimmäinen kuva piirretään päälle. Kerrokset näkyvät toistensa läpi vain siellä, missä ne ovat läpinäkyviä, joten ylemmät liukuvärit häipyvät yleensä väriin `transparent`. Nykyaikaiset selaimet sekoittavat esikerrotulla alfalla, joten häivytys väriin `transparent` ei enää vedä harmaata sävyä väriin niin kuin ennen. Yhdistä kerrokset `background-size`- ja `background-repeat`-ominaisuuksiin, kun kerroksen pitää peittää vain osa laatikosta.

```css
.card {
  background-color: #111827;
  background-image:
    /* top: a soft sheen across the upper third */
    linear-gradient(180deg, rgb(255 255 255 / 0.12), transparent 35%),
    /* bottom: the colour itself */
    linear-gradient(135deg, #312e81, #7c3aed 55%, #db2777);
}
```

Kiilto kerrostettuna perusliukuvärin päälle. Luettelon ensimmäinen liukuväri piirretään päälle.

Kerrostaminen on myös rikkaampien tehosteiden perusta: kerrostetut säteittäiset hehkut tekevät [mesh-liukuvärin CSS:llä](https://gradiently.design/fi/guide/css-mesh-gradient), ja ohut kohinakerros päällä piilottaa portaikkoisuuden, kuten selitetään oppaassa [liukuvärin banding](https://gradiently.design/fi/guide/gradient-banding).

## Pehmeämmät sekoitukset värien interpolaatiolla

Kun jokainen väri on kirjoitettu vanhalla muodolla, kuten heksalla, `rgb()`:llä tai `hsl()`:llä, selain sekoittaa sRGB:ssä taaksepäin yhteensopivuuden vuoksi. sRGB-sekoitukset kaukaisten sävyjen välillä kulkevat tylsien, harmahtavien keskikohtien kautta: sinisestä keltaiseen on klassinen tapaus. Lisäämällä `in oklab` tai `in oklch` pyydät havainnollista väriavaruutta, joka pitää keskikohdan vaaleampana ja tasaisempana. Oma opas [OKLCH-liukuväreistä CSS:ssä](https://gradiently.design/fi/guide/css-gradient-oklch) käsittelee sävysuunnat ja varavaihtoehdot.

- Oletus-sRGB: harmaa keskikohta: `linear-gradient(90deg, #2563eb, #facc15)`
- in oklab: puhtaampi keskikohta: `linear-gradient(90deg in oklab, #2563eb, #facc15)`
- in oklch: kulkee sävyn kautta: `linear-gradient(90deg in oklch, #2563eb, #facc15)`

Sinisestä keltaiseen kolmella tavalla. Vain interpolaatiomenetelmä muuttuu.

### Vältä

- Pitkiä sekoituksia vastakkaisten sävyjen välillä pelkässä sRGB:ssä
- `to top right` -arvoa, kun useiden eri muotoisten korttien pitää jakaa yksi suunta
- Häivytystä väriin `white`, kun tarkoitat häivyttää pois; käytä `transparent`
- Hyvin pehmeitä, tummia, leveitä sekoituksia ilman rakeisuutta, jotka juovittuvat monilla näytöillä

### Tee näin

- Lisää `in oklch` tai keskimmäinen värikohta pitääksesi sekoitukset eloisina
- Käytä yhtä kulmaa, kuten `135deg`, yhtenäiseen järjestelmään
- Häivytä kerrokset väriin `transparent`, jotta alla oleva näkyy
- Lisää himmeä kohinakerros suurten tummien liukuvärien päälle

## Selaintuki ja varavaihtoehdot

`linear-gradient()` toimii ilman etuliitettä kaikissa nykyisissä selaimissa, joten vanhat `-webkit-`-versiot voi jättää pois. Interpolaatiomenetelmät, kahden paikan värikohdat ja vihjeet ovat uudempia; tarkista tiedot palvelusta [caniuse](https://caniuse.com/css-gradients). Varmin tapa on tasainen `background-color` ensin, sitten liukuväri ja sitten parannettu versio myöhemmässä määrittelyssä, jonka vanhat selaimet ohittavat, koska eivät osaa jäsentää sitä.

```css
.banner {
  background-color: #1e3a8a;
  background-image: linear-gradient(90deg, #1e3a8a, #f59e0b);
  /* browsers that understand interpolation methods use this line */
  background-image: linear-gradient(90deg in oklch, #1e3a8a, #f59e0b);
}
```

Asteittainen parantaminen: jokainen rivi ohittaa edellisen vain, jos selain ymmärtää sen.

Jos haluat mieluummin lähteä sekoituksesta, jolla on jo luonnetta, kuin säätää värikohtia käsin, [liukuvärigeneraattori](https://gradiently.design/fi/guide/gradient-generator) tai valmiiden taustojen kirjasto säästää aikaa. Molemmissa tapauksissa säilytä koodi: CSS-liukuväri pysyy terävänä kaikissa kooissa ja painaa muutaman tavun.

## FAQ

### Miten teen suoraviivaisen liukuvärin CSS:llä?

Aseta elementille `background-image: linear-gradient(suunta, väri1, väri2)`, esimerkiksi `linear-gradient(90deg, #0f172a, #38bdf8)`. Lisää sen eteen `background-color` varavärinä.

### Mikä on CSS-liukuvärin oletussuunta?

Ylhäältä alas, sama kuin `to bottom` tai `180deg`. Ensimmäinen väri näkyy ylhäällä ja viimeinen alhaalla.

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

Anna kahdelle vierekkäiselle värikohdalle sama paikka, kuten `#f97316 50%, #1e293b 50%`, tai käytä toisena paikkana arvoa `0`, jolloin se rajataan edelliseen värikohtaan.

### Miksi liukuvärini keskikohta näyttää harmaalta?

Heksavärit sekoitetaan oletuksena sRGB:ssä, mikä himmentää kaukaisten sävyjen välisen keskikohdan. Lisää kulman jälkeen `in oklch` tai `in oklab`, tai lisää kirkkaampi keskimmäinen värikohta.

### Onko 45deg sama kuin to top right?

Vain neliössä. `45deg` osoittaa aina 45 asteeseen, kun taas `to top right` säätää kulmansa niin, että keskimmäinen väri kulkee laatikon kahden muun kulman välistä.