# Valkoinen liukuväri: hillityt sävyt ja CSS-koodit

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

Valkoinen liukuväri on kaikista hillityin, ja moni suunnittelija erehtyy sen sävyissä hieman. Näistä koodeista näet, kuinka suuri muutos riittää, mitkä sävyt toimivat ja miten häivytät sisällön valkoiseen.

## The short version

- Valkoinen liukuväri yhdistää puhtaan valkoisen vain muutaman prosentin tummempaan valkoiseen, jossa on lämmin, viileä tai helmiäinen sävy.
- Hieman lämpimät valkoiset muistuttavat paperia, hieman sinertävät valkoiset posliinia tai lunta.
- Valkoinen liukuväri tarvitsee riittävän sävyeron näkyäkseen kirkkailla puhelinnäytöillä, joilla pienet erot katoavat.
- Häivytä sisältö valkoiseen taustaan CSS-liukuvärillä, joka alkaa arvosta `rgb(255 255 255 / 0)` ja päättyy väriin `#ffffff`.
- Valkoiset liukuvärit sopivat erinomaisesti tuotekuvien taustoiksi, sillä pehmeä sävymuutos muistuttaa valaistua studiota tasaisen syväyksen sijaan.

**Valkoinen liukuväri** vaihtuu puhtaasta valkoisesta vain hieman tummempaan valkoiseen, jossa on yleensä hento lämmin, viileä tai helmiäinen sävy. Muutos on tarkoituksella pieni: sen pitäisi tuntua pinnalle lankeavalta valolta, ei väriltä. Siksi valkoiset liukuvärit sopivat selkeille verkkosivuille, tuotekuviin, kutsuihin ja minimalistisiin somejulkaisuihin. Alla saat ohjeet voimakkuuden valintaan, valkoisten paletin, kopioitavat koodit ja oikean tavan häivyttää valkoiseen CSS:llä.

## Kuinka suuri sävymuutos valkoinen liukuväri tarvitsee

Liian pientä muutosta ei huomaa, varsinkaan puhelimen täydellä kirkkaudella. Liian suuri muutos tekee valkoisesta harmaan ja nuhjuisen. Taulukon kolme voimakkuutta kuvaavat loppusävyn eroa puhtaaseen valkoiseen. Keskimmäinen sopii useimpiin ulkoasuihin.

| Voimakkuus | Alku | Loppu | Käyttökohde |
| --- | --- | --- | --- |
| Häilyvä | `#ffffff` | `#f8f8f8` | Laajat verkkosivuosiot, pitkät tekstit |
| Pehmeä | `#ffffff` | `#efefef` | Kortit, somejulkaisut, kutsut |
| Näkyvä | `#ffffff` | `#e2e2e2` | Tuotetaustat, studiotaustat |

Selkeyden vuoksi arvot ovat neutraaleja. Sävytä loppuväriä käytännössä hieman lämpimäksi tai viileäksi alla olevien koodien tapaan.

## Valkoiset sävyt liukuvärin pohjaksi

Täysin neutraali harmaa valkoisen liukuvärin lopussa näyttää hieman elottomalta. Pieni sävytys auttaa: lämpimät valkoiset muistuttavat paperia, pellavaa ja norsunluuta, viileät posliinia, huurretta ja lunta. Valitse muuhun palettiin sopiva sävy ja käytä sitä johdonmukaisesti koko sarjassa.

- Puhdas valkoinen: #ffffff
- Norsunluu: #fffdf8
- Paperi: #f6f4f0
- Pellava: #f1ece3
- Posliini: #f1f4f7
- Huurre: #eaf2f8
- Helmilila: #f3eef8
- Helmiminttu: #eef6f6

Sävytettyjä valkoisia. Valkoisella sivulla ne näyttävät lähes samoilta, mutta rinnakkain lämpimät ja viileät sävyt erottuvat selvästi.

## Valkoisen liukuvärin koodit

Kaikki nämä alkavat puhtaasta tai lähes puhtaasta valkoisesta. Paperi ja norsunluu ovat lämpimiä ja sopivat julkaisuihin. Posliini ja huurre ovat viileitä ja teknisiä. Aamuvalo tuo yhteen kulmaan pehmeän hohteen. Helmi yhdistää useita lähes huomaamattomia sävyjä hennoksi helmiäiseksi ilman sateenkaarivaikutelmaa.

- Paperi: `linear-gradient(180deg, #ffffff 0%, #f6f4f0 100%)`
- Norsunluu: `linear-gradient(150deg, #fffdf8 0%, #f8f1e4 100%)`
- Posliini: `linear-gradient(160deg, #ffffff 0%, #f1f4f7 60%, #e6ebf0 100%)`
- Huurre: `linear-gradient(180deg, #f8fbfd 0%, #eaf2f8 100%)`
- Aamuvalo: `radial-gradient(ellipse at 20% 0%, #ffffff 0%, #fbf8f2 45%, #f1ece3 100%)`
- Helmi: `linear-gradient(135deg, #fdfcfb 0%, #f3eef8 35%, #eef6f6 65%, #fbf7f0 100%)`

Kuusi valkoista liukuväriä. Kirkkaalla näytöllä ne tuntuvat pinnoilta eivätkä väreiltä, juuri kuten pitääkin.

Jos haluat hieman enemmän väriä mutta yhtä ilmavan tunnelman, seuraava askel on [pastelliliukuväri](https://gradiently.design/fi/guide/pastel-gradients). Neutraalien sävyjen toisen pään löydät [harmaiden liukuvärien](https://gradiently.design/fi/guide/grey-gradient) koodeista.

## Valkoinen liukuväri tuotteiden taustalla

Valokuvaajat valaisevat valkoisen taustan niin, että valo vähenee pehmeästi reunoja kohti. Se erottaa kohteen taustasta ilman varjon rajaa. Säteittäinen valkoinen liukuväri tekee saman näytöllä. Se on erityisen hyödyllinen, kun irrotat tuotteen valokuvasta: tasainen valkoinen näyttää liimatulta, pehmeä sävymuutos studiolta.

Studiotausta: `radial-gradient(ellipse at 50% 35%, #ffffff 0%, #f3f3f3 55%, #e2e2e2 100%)`

Kirkkain kohta on hieman keskikohdan yläpuolella tuotteen takana. Kulmat ovat vaaleanharmaat. Käytä Shopify-tuotekuviin kokoa 2048×2048.

[Tuotekuvien taustat](https://gradiently.design/fi/guide/product-photo-backgrounds) käsittelee varjoja, värillisiä taustoja ja tilanteita, joissa valkoinen ei toimi.

## Häivytys valkoiseen CSS-liukuvärillä

Verkon tavallisin valkoinen liukuväri ei ole tausta. Se on häivytys, joka pehmentää katkaistun artikkelin loppua, vieritettävän listan alareunaa tai valokuvan reunaa. Määritä läpinäkyvä pää valkoiseksi, jonka peittävyys on nolla. Nykyselaimet sekoittavat arvon `transparent` oikein, mutta `rgb(255 255 255 / 0)` kertoo tarkoituksen täsmällisesti ja välttää harmahtavan kaistan, jonka jotkin vanhemmat moottorit piirsivät.

```css
/* soften the end of a clipped block of text */
.excerpt {
  position: relative;
  max-height: 12rem;
  overflow: hidden;
}

.excerpt::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 5rem;
  background: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, #ffffff 90%);
  pointer-events: none;
}
```

Häivytys päättyy täysin peittävään valkoiseen juuri ennen alareunaa, jolloin viimeinen tekstirivi katoaa siististi. Sovita loppuväri sivun taustaan.

Jos sivun tausta on sävytetty valkoinen, häivytä siihen väriin. Muuten häivytyksen loppuun jää näkyvä vaaleampi kaistale. [Läpinäkyvä CSS-liukuväri](https://gradiently.design/fi/guide/css-gradient-transparent) käsittelee häivytyksiä ja päällekkäisiä kerroksia tarkemmin.

## Raikas valkoinen ilman haalistunutta ilmettä

### Haalistunut

- Päättyy neutraaliin keskiharmaaseen
- Muutos on niin pieni, että se katoaa puhelimella
- Vaaleanharmaa teksti sävytetyllä valkoisella liukuvärillä
- Lämpimiä ja viileitä valkoisia sekaisin
- Häivytys valkoiseen kermanvärisellä sivulla

### Raikas

- Päättyy kevyesti sävytettyyn valkoiseen
- Pehmeä mutta näkyvä muutos, tarkistettu puhelimella
- Lähes musta tai syvä laivastonsininen teksti
- Yksi sävyperhe kauttaaltaan
- Häivytys sivun tarkkaan taustaväriin

Valkoisissakin liukuväreissä näkyy sävyportaita, vaikkakin vähemmän kuin tummissa. Jos huomaat portaita suurella näytöllä, hyvin hieno rakeisuus korjaa ne. [Liukuvärien raidoittuminen](https://gradiently.design/fi/guide/gradient-banding) selittää keinon.

## Valkoiset liukuvärit minimalistisissa ulkoasuissa

Minimalistinen ulkoasu onnistuu tai epäonnistuu typografiansa mukana, eikä valkoinen anna sille piilopaikkaa. Käytä vahvaa, lähes mustaa tekstiä, runsaasti tilaa ja yhtä värillistä yksityiskohtaa. Valkoinen liukuväri tuo juuri riittävästi syvyyttä, jotta sivu tuntuu valaistulta ja viimeistellyltä. [Minimalistiset taustat](https://gradiently.design/fi/guide/minimalist-backgrounds) tarjoaa lisää samanhenkisiä ideoita. [Verkkosivun pääkuvan taustat](https://gradiently.design/fi/guide/website-hero-background) näyttää, miten posliini- tai aamuvaloliukuväri voi kantaa koko laskeutumissivua.

Pystysuuntainen hääkutsu, jossa pehmeällä norsunluunvalkoisella taustalla lukee tummalla Olet tervetullut

5×7 tuuman kutsu pehmeällä norsunluunvärisellä Markilla. Tumma teksti, reilut marginaalit eikä muuta.

Gradientlyssä vaaleat Markit toimivat kuten voimakkaatkin: Mark pitää sanojen takana rauhallisen alueen, ja Automaattinen muste valitsee tumman tekstivärin Markin omasta paletista. Hento valkoinen ei siis saa harmaata tekstiä, joka katoaa näkyvistä.

## FAQ

### Mikä on hyvä valkoisen liukuvärin koodi?

Kokeile pehmeään paperi-ilmeeseen arvoa `linear-gradient(180deg, #ffffff 0%, #f6f4f0 100%)`. Viileään posliini-ilmeeseen voit vaihtaa loppuväriksi #e6ebf0.

### Miten teen valkoisesta läpinäkyvään vaihtuvan liukuvärin CSS:llä?

Käytä arvoa `linear-gradient(180deg, rgb(255 255 255 / 0), #ffffff)`. Jos sivun tausta ei ole puhdas valkoinen, vaihda loppuväri taustan väriksi.

### Miksi valkoinen liukuvärini ei näy?

Loppuväri on liian lähellä valkoista. Tummenna se suunnilleen väriin #efefef, lisää hieman lämmintä tai viileää sävyä ja tarkista puhelimen täydellä kirkkaudella.

### Mikä tekstiväri sopii valkoiselle liukuvärille?

Lähes musta, hiilenharmaa tai syvä laivastonsininen. Vältä vaaleanharmaata tekstiä, joka sulautuu liukuvärin tummempaan päähän.