# Liukuväriteksti CSS:llä: tee se hyvin

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

Kolme riviä CSS:ää asettaa liukuvärin kirjainten sisään. Jotta se olisi luettava, kestävä ja tyylikäs, tarvitaan vielä muutama, ja tieto siitä, milloin teksti kannattaa jättää tasaväriseksi.

## The short version

- CSS:n liukuväriteksti tehdään piirtämällä liukuväri elementin taustaksi, rajaamalla se kirjainten muotoon `background-clip: text` -ominaisuudella ja tekemällä tekstin väri läpinäkyväksi.
- Aseta ensin aina yksivärinen tekstiväri ja käytä läpinäkyvää väriä vain @supports-tarkistuksen sisällä, jotta sanat eivät koskaan katoa.
- Jokaisen liukuvärin osan on erotuttava taustasta riittävästi, joten tarkista vaalein ja tummin väripiste, ei vain yhtä.
- Liukuväriteksti sopii lyhyisiin, suurikokoisiin otsikkoriveihin, ja toimii huonosti leipätekstissä, linkeissä ja pienissä tunnisteissa.
- Asetus box-decoration-break: clone antaa jokaiselle rivitetyn inline-elementin jokaiselle riville oman täyden liukuvärinsä.

**Liukuväriteksti** tehdään CSS:llä piirtämällä liukuväri tekstielementin taustaksi, rajaamalla tausta kirjainten muotoon `background-clip: text` -ominaisuudella ja tekemällä itse teksti läpinäkyväksi, jotta liukuväri kuultaa läpi. Siihen tarvitaan kolme määrittelyä, se toimii kaikissa nykyisissä selaimissa ja pysyy oikeana, valittavana ja haettavana tekstinä eikä muutu kuvaksi.

```css
.gradient-text {
  background-image: linear-gradient(90deg, #6d28d9, #be185d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
```

Perustekniikka. Etuliitteellinen rivi pitää vanhemmat Safari- ja Chromium-versiot tyytyväisinä.

Violetista ruusuun, vaaleille sivuille: `linear-gradient(90deg, #6d28d9, #be185d)`

Liukuväri noiden kirjainten sisällä. Molemmat päät ovat riittävän tummia luettavaksi valkoisella.

Loppu tästä oppaasta käsittelee, mitä kolmen rivin versio tekee väärin: puuttuvat varavärit, kontrasti, monirivinen teksti, katkeavat alaluvut ja muotoilukysymys siitä, milloin liukuväriteksti ylipäätään auttaa. Liukuvärikirjaimista some- ja brändityössä, verkkosivun sijaan, kerrotaan oppaassa [tekstitehosteet](https://gradiently.design/fi/guide/text-effects).

## Kestävä liukuväritekstin resepti varaväreineen

Jos selain ottaa käyttöön `color: transparent` mutta ei rajausta, teksti katoaa. Suojaudu siltä: anna elementille liukuvärin sävyistä otettu yksivärinen väri ja vaihda läpinäkyvään versioon vasta, kun selain vahvistaa tuen. Lisää nollaus pakotettujen värien tilaan, jossa järjestelmä korvaa värisi ja tekstin täytyy pysyä näkyvissä.

```css
.gradient-text {
  color: #6d28d9; /* solid fallback from the gradient */
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-text {
    background-image: linear-gradient(90deg, #6d28d9, #be185d);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

@media (forced-colors: active) {
  .gradient-text {
    background: none;
    color: CanvasText;
  }
}
```

Ensin yksivärinen väri, liukuväri vain siellä missä se on tuettu ja järjestelmän väri, kun käyttäjä pakottaa omansa.

[MDN:n background-clip-sivu](https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip) dokumentoi `text`-arvon ja sen nykyisen tuen.

## Kontrasti: tarkista liukuvärin molemmat päät

Kontrastin tarkistin ottaa yhden tekstivärin, mutta liukuvärillisessä tekstissä värejä on monta. Sanat ovat yhtä luettavia kuin niiden heikoin kohta, joten tarkista vaalein ja tummin väripiste taustaa vasten ja katso myös keskikohtaa, koska sRGB-sekoitus voi painua kummastakin päästä vaaleammaksi tai harmaammaksi. Suurelle otsikkotekstille WCAG vaatii vähintään 3:1, normaalille tekstille 4,5:1. [Värien kontrasti](https://gradiently.design/fi/guide/color-contrast-accessibility) selittää suhdeluvut.

- Valkoisella: violetti ruusuun: `linear-gradient(90deg, #6d28d9, #be185d)`
- Valkoisella: meri turkoosiin: `linear-gradient(90deg, #0369a1, #0f766e)`
- Valkoisella: hiillos ruusuun: `linear-gradient(90deg, #c2410c, #be185d)`
- Lähes mustalla: lilasta pinkkiin: `linear-gradient(90deg, #a78bfa, #f472b6)`
- Lähes mustalla: syaanista sitruunaan: `linear-gradient(90deg, #67e8f9, #fde047)`

Tekstiliukuvärit, joiden kaikki väripisteet ylittävät 5:1 mainitulla taustalla. Valkoisella jokainen piste mittaa yli 5:1, värillä #0b0b12 yli 7:1.

> **Yleisin virhe** Liukuväri, joka haalistuu vaaleaan väriin, kuten violetista vaaleanpunaiseen valkoisella, tekee jokaisen sanan lopusta lähes näkymättömän. Pidä molemmat päät samalla, turvallisella vaaleudella ja anna sävyn tehdä muutos.

## Monirivisen liukuväritekstin ja katkeavien kirjainten korjaus

Rivittyvällä inline-elementillä selain asettaa yhden taustan kaikkien rivien yli ikään kuin ne olisivat yksi nauha, joten ensimmäinen rivi saa liukuvärin alun ja viimeinen lopun. Yleensä haluat, että jokainen rivi kantaa koko liukuvärin. `box-decoration-break: clone` tekee sen. Lohkoelementeillä, kuten otsikolla, liukuväri kattaa jo koko laatikon, joten pitkä liukuväri leveän otsikon yli voi näyttää lyhyillä riveillä vain keskikohtansa.

```css
.gradient-text {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  /* stop descenders being cut off */
  line-height: 1.15;
  padding-block-end: 0.08em;
}
```

Jokainen rivi saa oman täyden liukuvärinsä, ja g:n, j:n, p:n ja y:n hännät pysyvät piirretyn alueen sisällä.

Katkeavat alaluvut ovat toinen yllätys. Tausta piirtyy vain elementin laatikkoon, joten hyvin tiukalla `line-height`-arvolla kirjainten sen alle ulottuvat osat jäävät läpinäkyviksi ja katoavat. Noin 1,1:n riviväli tai hieman alapaddingia korjaa asian. Kursiiviset otsikkofontit voivat menettää viimeisen kirjaimensa oikean kärjen samasta syystä, ja hieman vaakapaddingia auttaa.

## Milloin liukuväriteksti toimii ja milloin ei

### Vältä

- Leipäteksti, jossa värinvaihtelu hidastaa lukemista
- Linkit ja painikkeet, joissa väri kertoo tilan
- Pienet tunnisteet alle noin 24 px:n, joissa liukuväri ei silti näy
- Sateenkaariliukuvärit, joissa on viisi tai useampi sävy
- Liukuväriteksti liukuvärillisellä taustalla

### Käytä sitä

- Yhteen sanaan tai lyhyeen fraasiin suuressa otsikossa
- Tuotteen tai brändin nimeen hero-alueella
- Isoihin lukuihin tilastolohkossa
- Kahteen tai kolmeen samankaltaiseen sävyyn samalla vaaleudella
- Rauhallisiin, tasaisiin taustoihin, jotka antavat kirjainten johtaa

Hyvä nyrkkisääntö: liukuväriteksti on korostus, kuten kursiivi. Yksi korostettu sana otsikossa vetää katseen, kokonainen kappale väsyttää sen. Paksut fontinpaksuudet auttavat, koska ohuet viivat eivät näytä tarpeeksi väriä, jotta ne näyttäisivät liukuvärinä. Jos muu sivu käyttää jo liukuvärillisiä taustoja, tasainen kirjaintyyppi on yleensä vahvempi valinta; [teksti liukuvärillä taustalla](https://gradiently.design/fi/guide/text-on-gradient) käsittelee sen tapauksen.

## Liukuvärillisen tekstin animointi

Jotta väri virtaisi kirjainten läpi, tee taustasta tekstiä suurempi ja liikuta sitä. Mitoita se 200 % leveäksi ja animoi `background-position` edestakaisin `alternate`-arvolla, jolloin silmukan alkaessa uudelleen ei ole hyppyä. Huomioi [vähennetyn liikkeen](https://gradiently.design/fi/guide/reduced-motion) asetukset ja pidä liike hitaana: välke muutaman sekunnin välein näyttää viimeistellyltä, nopea kierto näyttää varoitukselta.

```css
.gradient-text--flow {
  background-image: linear-gradient(90deg, #6d28d9, #be185d, #c2410c);
  background-size: 200% 100%;
  animation: flow 6s ease-in-out infinite alternate;
}

@keyframes flow {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-text--flow { animation: none; }
}
```

Väri ajelehtii edestakaisin sanojen läpi. Yhdistä se yllä olevan reseptin rajaukseen ja varaväriin.

Samat taustatempuut ovat [CSS-animoitujen liukuvärien](https://gradiently.design/fi/guide/css-animated-gradient) perusta laajemmin, ja täytön sijaan liukuvärireunukset käsitellään oppaassa [CSS-liukuvärireunus](https://gradiently.design/fi/guide/css-gradient-border).

## FAQ

### Miten teen liukuvärillisen tekstin CSS:llä?

Aseta liukuväri `background-image`-arvoksi, lisää `-webkit-background-clip: text` ja `background-clip: text` sekä aseta `color: transparent`. Laita yksivärinen väri `@supports`-tarkistuksen ulkopuolelle varavärinä.

### Miksi liukuvärillinen tekstini on näkymätön?

Teksti on läpinäkyvä, mutta taustaa ei rajata, yleensä koska rajausmääritys puuttuu, on kirjoitettu väärin tai ei ole tuettu. Käytä `color: transparent` vain `@supports (background-clip: text)` -lohkon sisällä.

### Onko liukuväriteksti saavutettavaa?

Voi olla, jos jokaisella liukuvärin osalla on riittävä kontrasti taustaan ja teksti pysyy oikeana tekstinä. Tarkista vaalein ja tummin väripiste ja nollaa värit pakotettujen värien tilassa.

### Miksi kirjainteni alaosat katkeavat?

Rajattu tausta kattaa vain elementin laatikon, joten tiukka riviväli jättää alaluvut sen ulkopuolelle. Nosta riviväli noin arvoon 1,1 tai lisää hieman alapaddingia.

### Voiko liukuväritekstiä käyttää sähköposteissa?

`background-clip: text` -tuki on epätasainen sähköpostiohjelmissa, joten käytä siellä yksivärisyyttä tai kuvaa vaihtoehtoisella tekstillä. Katso [liukuvärit sähköpostissa](https://gradiently.design/fi/guide/gradients-in-email).