# CSS backdrop-filter: nopea huurrelasitausta

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

Huurrelasi syntyy kolmella CSS-rivillä ja voi silti hidastaa hyvää puhelinta. Tässä koodi, piirtämisen kustannus ja luettavat varaversiot ilman sumentamista.

## The short version

- CSS backdrop-filter lisää sumennuksen kaltaisia tehosteita elementin taakse, ei itse elementtiin.
- Taustan pitää olla osittain läpinäkyvä, muuten backdrop-filter jää piiloon.
- Sumennuksen hinta kasvaa säteen ja alueen mukana ja maksetaan uudelleen taustasisällön liikkuessa.
- Safari tarvitsi -webkit-backdrop-filter-etuliitteen versioon 18 asti, joten molemmat rivit ovat yhä turvallinen valinta.
- Hyvä varaversio on peittävämpi tausta @supports-kyselyssä, jotta teksti näkyy ilman sumennusta.

**CSS backdrop-filter** lisää graafisen tehosteen, yleensä sumennuksen, elementin takana olevaan sisältöön. Aseta `backdrop-filter: blur(12px)` osittain läpinäkyvätaustaiselle elementille. Alla oleva sivu pehmenee navigaatiopalkkien, paneelien ja korttien huurrelasiksi. Kaikki nykyiset selaimet tukevat sitä. Hyvä toteutus pitää alueen pienenä, säteen maltillisena ja varaversion luettavana.

## Huurrelasin perusresepti

Lasi syntyy läpikuultavasta täytöstä, sumennuksesta ja heikosta reunasta, joka antaa paneelille muodon. Pieni kylläisyyden lisäys auttaa, sillä sumennus keskiarvoistaa värit odotettua harmaammiksi.

```css
.glass {
  background: rgb(255 255 255 / 0.14);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 16px;
}
```

Vaalea lasipaneeli tummalle tai värikkäälle sivulle. Etuliitteellinen rivi ensin, jotta standardiominaisuus voittaa molempia tukevassa selaimessa.

Lasi näyttää lasilta vain, kun takana on jotain sumennettavaa. Tasaisella harmaalla sivulla paneeli näyttää vain himmeältä. Käytä kuvaa tai rikasta liukuväriä; [glassmorfismi](https://gradiently.design/fi/guide/glassmorphism) selittää tarkemmin.

Hiillos ja violetti keskiyössä: `radial-gradient(circle at 20% 25%, #f97316 0%, transparent 40%), radial-gradient(circle at 80% 70%, #7c3aed 0%, transparent 45%), linear-gradient(160deg, #0f172a 0%, #1e1b4b 100%)`

Tausta, jossa on erillisiä värialueita. Sumennus pehmentää ne paneelin takaiseksi valoksi, mikä on tehosteen idea.

## Mitä backdrop-filter-funktiot tekevät

Ominaisuus hyväksyy samat funktiot kuin `filter`. Voit ketjuttaa ne yhteen määrittelyyn. Ne suoritetaan vasemmalta oikealle, joten `blur()` ja sitten `saturate()` eroaa käänteisestä järjestyksestä. Koko lista on [MDN:ssä](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter).

| Funktio | Esimerkki | Käyttö |
| --- | --- | --- |
| `blur()` | `blur(12px)` | Huurrelasi, huomion keskittäminen dialogiin |
| `saturate()` | `saturate(160%)` | Värin palautus sumennuksen jälkeen |
| `brightness()` | `brightness(0.7)` | Levottoman taustan tummennus vaalealle tekstille |
| `contrast()` | `contrast(0.8)` | Levottoman kuvan rauhoitus paneelin alla |
| `grayscale()` | `grayscale(1)` | Sivun hillitseminen modaalin takana |
| `none` | `none` | Tehosteen poisto varaversiossa tai mediakyselyssä |

Käytännön funktiot. Alle 1 oleva brightness() parantaa usein luettavuutta raskasta sumennusta paremmin.

## Backdrop-filterin suorituskyky

Sumennus on selaimelle raskas piirrettävä. Sen pitää lukea taustan jokainen pikseli, tutkia säteen sisäiset naapurit ja yhdistää tulos. Työ toistuu aina paneelin takaisen sisällön muuttuessa. Vierittyvän sivun päällä pysyvä otsake piirtää sumennuksen jokaisella ruudulla.

Kustannusta määrää kaksi hallittavaa lukua: elementin alue ja säde. 64 pikselin otsake 12px:n sumennuksella on kevyt lähes kaikille. Koko näytön 40px:n sumennus videon päällä voi pudottaa ruutuja keskitason puhelimessa. [CSS-liukuvärien suorituskyky](https://gradiently.design/fi/guide/css-gradient-performance) kertoo laajemmin.

### Hidas

- Koko näkymän sumennus modaalin takana
- 30px:n tai suurempi säde
- Säteen animointi avattaessa ja suljettaessa
- Lasipaneelit toistensa sisällä
- Sumennus automaattisesti toistuvan videon yllä

### Nopea

- Vain tarvittavan palkin, kortin tai paneelin sumennus
- Säteet 8px-20px
- Paneelin häivytys kiinteällä sumennuksella
- Yksi lasikerros ja tasaiset täytöt sen sisällä
- Sumennus still-kuvien ja liukuvärien yllä

> **Mittaa oikealla puhelimella** Avaa Chromen kehittäjätyökalujen Rendering-paneeli, kytke paint flashing ja vieritä. Jos lasi välähtää joka ruudulla ja Performance näyttää puuttuvia ruutuja, pienennä ensin aluetta tai sädettä.

## Miksi backdrop-filter ei toimi

Kun sumennus ei näytä tekevän mitään, syy löytyy yleensä lyhyestä listasta.

1. **Tarkista taustan läpinäkyvyys** Tasainen `background: #fff` peittää sumennetun taustan. Käytä alfaa, kuten `rgb(255 255 255 / 0.15)`.
2. **Lisää Safarin etuliite** Safari tukee etuliitteetöntä ominaisuutta vasta versiosta 18. Vanhemmat iPhonet tarvitsevat `-webkit-backdrop-filter`-arvon.
3. **Etsi ylempää backdrop root** Vanhemman `filter`, alle 1:n `opacity`, maski tai oma backdrop-filter rajoittaa lapsen näkemää sisältöä. Lapsi sumentaa vain vanhempaa, mikä voi näyttää vaikutuksettomalta.
4. **Huomioi kiinteät lapsielementit** Kuten `filter`, backdrop-filter tekee elementistä kiinteiden ja absoluuttisten lasten sisältävän lohkon. Lasinavigaation kiinteä valikko asettuu otsakkeeseen, ei ikkunaan.
5. **Varmista sisältö taustalla** Tasaisen värin sumennus ei näy. Vieritä paneeli kuvan päälle ja tarkista toiminta.

## Luettavuuden säilyttävä varaversio

Läpikuultava paneeli suunnitellaan sumennuksen varaan. Ilman sitä 14-prosenttinen valkoinen täyttö levottomalla kuvalla romahduttaa tekstikontrastin. Kirjoita ensin luettava versio ja paranna sitä sumennusta tukevissa selaimissa.

```css
/* Works everywhere: opaque enough to read on its own */
.glass {
  background: rgb(15 23 42 / 0.86);
  color: #f8fafc;
}

/* Upgrade where blur is available */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgb(15 23 42 / 0.45);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
}

/* Respect people who ask for less transparency, where supported */
@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: rgb(15 23 42 / 0.94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
```

Lasin asteittainen parannus. prefers-reduced-transparency-tuki on vielä rajallinen, joten lohko on huomioiva lisä, ei takuu.

Tarkista kontrasti taustan pahimmasta kohdasta, älä keskiarvosta. Kirkkaan taivaan yli liikkuva valkoinen lasiotsikko voi jäädä alle [värikontrastin ja saavutettavuuden](https://gradiently.design/fi/guide/color-contrast-accessibility) rajojen. `brightness(0.7)`-tummennus auttaa yleensä varmemmin kuin suurempi sumennus.

## Milloin sumennusta ei tarvita

Moni lasipaneeli on vain levottoman taustan tekstin pelastus. Jos saat suunnitella taustan, rauhallisempi ratkaisee ongelman ilman piirtohintaa. Pehmeä vähäkontrastinen pääkuvaliukuväri ei tarvitse paneelia. Katso [verkkosivun pääkuvataustat](https://gradiently.design/fi/guide/website-hero-background) ja [sumennetut taustat](https://gradiently.design/fi/guide/blurred-background), joissa sumennus tehdään kuvaan kerran jokaisen ruudun sijaan.

Leveä verkkosivun pääkuva, jonka otsikko kulkee värikkään liukuvärin kirkkaimman osan yli

Sanat elävän taustan päällä: tässä turvaudutaan usein lasipaneeliin.

Sama verkkosivun pääkuva, jonka liukuväri tummenee ja rauhoittuu otsikon takana

Sama tausta rauhoittuu sanojen takana ilman paneelia, varjoa tai sumennusta.

Jälkimmäinen on Gradientlyn tapa pitää teksti luettavana. Mark tuntee sanojen paikat ja siirtää rauhallisimman, parhaiten kontrastoivan alueen niiden taakse. Otsikkoa ei tarvitse pelastaa laatikolla tai sumennuksella.

## FAQ

### Mitä eroa filterillä ja backdrop-filterillä on?

`filter` muuttaa elementtiä sisältöineen. `backdrop-filter` muuttaa vain läpinäkyvän taustan läpi näkyvää sisältöä elementin takana.

### Miksi backdrop-filterin sumennus ei näy?

Yleensä tausta on täysin peittävä, Safari tarvitsee `-webkit-`-etuliitteen tai vanhemman `filter`, `opacity` tai maski rajoittaa näkyvää sisältöä.

### Onko backdrop-filter raskas?

Voi olla. Hinta kasvaa alueen ja säteen mukana ja toistuu taustan liikkuessa. Pidä paneelit pieninä ja säteet maltillisina.

### Tarvitsenko yhä -webkit-backdrop-filterin?

Safari hyväksyy etuliitteettömän ominaisuuden versiosta 18, mutta vanhoja iPhoneja käytetään yhä. Molemmat rivit ovat järkevä valinta.

### Mikä sumennusarvo sopii huurrelasiin?

8px-20px sopii useimpiin käyttöliittymiin. Lisää yli 100 %:n saturate() palauttamaan sumennuksen viemää väriä.