# Läpinäkyvät CSS-liukuvärit: häivytykset ja peittokerrokset

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

Tyhjyyteen häipyvä liukuväri on CSS:n hyödyllisimpiä työkaluja. Ennen sen keskelle jäi harmaa tahra. Näin läpinäkyvyys toimii nykyisin ja näin käytät sitä.

## The short version

- Tee CSS-liukuväristä läpinäkyvä antamalla yhdelle väripisteelle nolla-alfa, esimerkiksi transparent tai rgb(124 58 237 / 0).
- Nykyiset selaimet interpoloivat liukuvärien värit esikerrotulla alfalla, joten häivytys transparent-avainsanaan ei enää tuota harmaata kaistaa.
- Taustaliukuväri häivyttää vain taustan. Häivytä elementin sisältö mask-image-ominaisuudella ja liukuvärillä.
- Usean pehmeästi sijoitetun väripisteen tummennus näyttää tasaisemmalta kuin kahden pisteen häivytys, jonka loppureuna erottuu.
- Keskeltä läpinäkyvä ja reunoilta tumma säteittäinen liukuväri muodostaa huomion yhteen kohtaan ohjaavan valokeilan.

Tee **läpinäkyvä CSS-liukuväri** antamalla yhdelle väripisteelle nolla-alfa: `linear-gradient(to bottom, #7c3aed, transparent)` häivyttää violetin pois ja paljastaa alla olevan sisällön. Sama idea toimii tekstin lopun häivytyksissä, kuvatekstien takana olevissa tummennuksissa ja kuvien värikerroksissa. Kun haluat häivyttää elementin sisällön taustan sijaan, käytä liukuväriä `mask-image`-ominaisuudessa.

## Läpinäkyvän värin kirjoitustavat

| Kirjoitusasu | Merkitys | Käyttötapa |
| --- | --- | --- |
| `transparent` | Musta nolla-alfalla | Minkä tahansa värin häivytys nykyisissä selaimissa |
| `rgb(124 58 237 / 0)` | Tämä violetti nolla-alfalla | Täsmällinen määrittely tai hyvin vanhojen selainten tuki |
| `rgb(124 58 237 / 0.4)` | Tämä violetti 40 prosentin peittävyydellä | Sävytys, joka ei katoa kokonaan |
| `#7c3aed66` | Kahdeksanmerkkinen heksakoodi, noin 40 prosenttia | Suunnittelutyökalut, jotka vievät alfan heksakoodina |
| `color-mix(in srgb, var(--brand) 40%, transparent)` | Muuttujan väri 40 prosentin peittävyydellä | Mukautettuihin ominaisuuksiin tallennetut värit |

Viisi tapaa ilmaista sama asia. Vain `color-mix()` toimii värillä, jonka tunnet ainoastaan muuttujana. Katso [CSS:n color-mix()](https://gradiently.design/fi/guide/css-color-mix).

## Miksi häivytykset muuttuivat ennen harmaiksi

Avainsana `transparent` tarkoittaa mustaa nolla-alfalla. Varhaiset selaimet sekoittivat punaisen, vihreän ja sinisen kanavan erillään alfakanavasta, joten valkoisesta `transparent`-arvoon kulkeva häivytys kävi puoliksi läpinäkyvän harmaan kautta. Siksi vanhat ohjeet vaativat sen sijaan arvoa `rgba(255, 255, 255, 0)`.

Määrittely edellyttää nyt esikerrottua alfaa: jokaista väriä painotetaan sen peittävyydellä ennen sekoittamista. Täysin läpinäkyvä piste ei siis tuo mukaan lainkaan väriä. Kaikki nykyiset selaimet toimivat näin. Saman värin kirjoittaminen nolla-alfalla on silti harmiton tapa, joka toimii myös sähköpostiohjelmissa ja vanhoissa WebView-näkymissä.

### Vanha toiminta

- Valkoinen muuttuu matkalla harmaaksi ennen `transparent`-arvoa
- Värikanavat sekoitetaan peittävyydestä riippumatta
- Kiertotapa: toista sama väri nolla-alfalla

### Nykyiset selaimet

- Valkoinen pysyy valkoisena häipyessään `transparent`-arvoon
- Esikerrottu alfa määrittelyn mukaisesti
- Molemmat tavat toimivat. Täsmällinen muoto on siirrettävämpi

- Häipyvä violetti: `linear-gradient(to bottom, #7c3aed 0%, rgb(124 58 237 / 0) 100%)`
- Petrooli häipyy 70 prosenttiin mennessä: `linear-gradient(to right, #0f766e 0%, rgb(15 118 110 / 0) 70%)`
- Oranssi hohde läpinäkyvällä pohjalla: `radial-gradient(circle at 30% 30%, #f97316 0%, rgb(249 115 22 / 0) 60%)`

Kolme häivytystä tämän sivun taustalla, aivan kuten omassa asettelussasi. Kerrosta tällaisia häivytyksiä pohjavärin päälle, kun haluat pehmeän, kerroksellisen taustan.

Häivytyksen loppukohta merkitsee yhtä paljon kuin sen värit. 70 prosentin kohdalla oleva väripiste päättää häivytyksen ajoissa ja jättää laatikon loppuosan täysin läpinäkyväksi. Tämä sopii sävytykseen, joka koskettaa vain yhtä reunaa. Kaksi samassa kohdassa olevaa pistettä leikkaa värin suoraan läpinäkyväksi. Se sopii puoliksi täytettyihin palkkeihin ja jaettuihin taustoihin. Pisteiden paikat selitetään [CSS:n lineaarisissa liukuväreissä](https://gradiently.design/fi/guide/css-linear-gradient).

## Sisällön häivyttäminen mask-image-ominaisuudella

Taustaliukuväri on sisällön takana, joten se ei voi häivyttää tekstiä, kuvia tai vieritettävää listaa. Maski voi. `mask-image`-ominaisuudessa liukuvärin peittävät osat pitävät elementin näkyvissä ja läpinäkyvät osat piilottavat sen. Maskin väri ei merkitse, vain alfa.

```css
/* Fade the last lines of a teaser paragraph */
.teaser {
  max-height: 9rem;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

/* Soft edges on a horizontally scrolling row */
.carousel {
  overflow-x: auto;
  mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

/* Fade a photo into the page on any background colour */
.hero-photo {
  mask-image: linear-gradient(to bottom, #000 50%, transparent 95%);
}
```

Maskit häivyttävät kaiken sisällön sivun taustaväristä riippumatta, vaalealla ja tummalla pohjalla. Etuliitteetön `mask-image` toimii nykyisissä selaimissa. Lisää `-webkit-mask-image` vanhempaa Safaria varten.

Vanha vaihtoehto oli sisällön päälle asetettu valkoinen liukuväri. Se hajoaa heti, kun sivu ei ole valkoinen, esimerkiksi [tummassa tilassa](https://gradiently.design/fi/guide/dark-mode-design). Se myös estää napsautukset, ellet muista asetusta `pointer-events: none`. Maskilla ei ole kumpaakaan ongelmaa.

## Tummennukset: läpinäkyvät liukuvärit tekstin takana

Tummennus peittää osan kuvasta, jotta sen päällä oleva teksti erottuu. Se häipyy täysin läpinäkyväksi, joten muu kuva pysyy kirkkaana. Kahden pisteen häivytys toimii, mutta sen suora muutos jättää näkyvän viivan tummennuksen loppuun. Useammat, loppua kohti loivennetut pisteet piilottavat reunan.

Pehmeä tummennus, seitsemän pistettä: `linear-gradient(to top, rgb(2 6 23 / 0.8) 0%, rgb(2 6 23 / 0.62) 15%, rgb(2 6 23 / 0.42) 30%, rgb(2 6 23 / 0.24) 48%, rgb(2 6 23 / 0.1) 66%, rgb(2 6 23 / 0.03) 82%, rgb(2 6 23 / 0) 100%)`

Peittävyys vähenee nopeasti tekstin lähellä ja hitaasti yläreunassa. Tulos näyttää luonnolliselta varjolta eikä kaistalta.

```css
.card {
  background-image:
    linear-gradient(to top,
      rgb(2 6 23 / 0.8) 0%, rgb(2 6 23 / 0.62) 15%, rgb(2 6 23 / 0.42) 30%,
      rgb(2 6 23 / 0.24) 48%, rgb(2 6 23 / 0.1) 66%, rgb(2 6 23 / 0.03) 82%,
      rgb(2 6 23 / 0) 100%),
    url("/images/coast.jpg");
  background-size: cover;
  color: #f8fafc;
}
```

Tummennus on ensimmäinen taustakerros, joten se sijoittuu kuvan päälle.

Sävytä tummennus kuvan oman värin syvällä sävyllä puhtaan mustan sijaan, niin se tuntuu osalta kuvaa. Lämpimässä auringonlaskukuvassa esimerkiksi syvä ruskea `rgb(41 20 8 / 0.75)` sulautuu kuvaan, kun taas musta näyttää sen päälle asetetulta suodattimelta. [CSS-liukuvärikerrokset](https://gradiently.design/fi/guide/css-gradient-overlay) käsittelee väripesuja ja sekoitustiloja, ja [teksti kuvan päällä](https://gradiently.design/fi/guide/text-over-image) tekstin sijoittelua.

## Läpinäkyvät aukot ja valokeilat

Käännä idea toisin päin: keskusta läpinäkyväksi ja ulkopuoli tummaksi. Sivun tai kuvan päälle asetettu [säteittäinen liukuväri](https://gradiently.design/fi/guide/css-radial-gradient) jättää yhden alueen valoisaksi ja himmentää muun. Se sopii käyttöönoton vinkkeihin, tuotteiden lähikuviin ja esitysdioihin.

```css
.spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 40%),
    transparent 0 140px,
    rgb(2 6 23 / 0.72) 220px
  );
}
```

Liikuta valokeilaa asettamalla `--x` ja `--y` JavaScriptillä. Pisteiden välinen 80 pikselin sekoitus pitää reunan pehmeänä.

Pysty tuotepostaus, jonka otsikko on liukuvärin kirkkaan alueen päällä

Ilman taustan muokkausta sanat kilpailevat sen kirkkaimman alueen kanssa.

Sama tuotepostaus, jonka otsikon takana liukuväri on rauhallisempi ja syvempi

Tausta rauhoittuu sanojen takana. Verkkosivulla tummennus tekee saman työn.

Somejulkaisuihin ja painotuotteisiin tarvitsee harvoin rakentaa tummennuksia käsin. Gradientlyssä Mark itse tekee tilaa sanoille syventämällä tai vaalentamalla värejä kirjainten lähellä. Erillistä peittokerrosta ei tarvitse säätää jokaiseen kokoon.

## FAQ

### Miten häivytän CSS-liukuvärin läpinäkyväksi?

Käytä viimeisenä pisteenä nolla-alfaväriä: `linear-gradient(#7c3aed, transparent)` tai täsmällisemmin `linear-gradient(#7c3aed, rgb(124 58 237 / 0))`.

### Miksi läpinäkyväksi häipyvä liukuvärini näyttää harmaalta?

Vanhemmat selaimet sekoittavat värit ilman esikerrottua alfaa, joten `transparent` eli läpinäkyvä musta harmaannuttaa keskikohdan. Häivytä sen sijaan omaan väriisi nolla-alfalla.

### Miten häivytän tekstin tai kuvan CSS:llä?

Käytä liukuväriä `mask-image`-ominaisuudessa, esimerkiksi `mask-image: linear-gradient(#000 60%, transparent)`. Elementti häipyy millä tahansa taustavärillä.

### Mikä on CSS:n scrim-tummennus?

Se on liukuväri, joka tummentaa kuvaa tekstin takana ja häipyy muualla läpinäkyväksi. Teksti erottuu ja kuva pysyy kirkkaana.

### Voiko CSS-liukuvärissä olla läpinäkyvä aukko?

Kyllä. Keskeltä läpinäkyvä ja kauempaa tumma säteittäinen liukuväri jättää alla olevaan sisältöön selkeän valokeilan.