Backdrop-filter i CSS: frostet glass som holder seg raskt

Backdrop-filter i CSS legger en grafisk effekt, vanligvis uskarphet, på det som ligger bak et element. Skriv backdrop-filter: blur(12px) på et element med delvis gjennomsiktig bakgrunn, så myknes siden under. Det gir uttrykket av frostet glass som brukes i navigasjonsfelt, paneler og kort. Alle nåværende nettlesere støtter det. Håndverket ligger i å holde området lite, radiusen moderat og reserven lesbar.

Grunnoppskriften på frostet glass

Tre ting skaper glass: en gjennomskinnelig flate som viser bakgrunnen, selve uskarpheten og en svak kant som gir panelet form. De fleste øker også metningen litt, fordi uskarphet jevner ut fargene og gjør dem gråere enn forventet.

.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;
}

Glass ser bare ut som glass når det er noe verdt å gjøre uskarpt bak det. På en flat grå side ser panelet bare mørkere ut. Legg det over et fotografi eller en fyldig gradient, som glassmorfisme forklarer nærmere.

Hva funksjonene i backdrop-filter kan gjøre

Egenskapen tar de samme funksjonene som filter, og du kan kjede dem i én deklarasjon. De brukes i rekkefølge fra venstre til høyre, så blur() etterfulgt av saturate() virker annerledes enn motsatt rekkefølge. Hele listen finnes på MDN.

Ytelse med backdrop-filter

Uskarphet er noe av det mer kostbare en nettleser tegner. Den må lese hver piksel bak elementet, hente nabopiksler ut til radiusen og sette sammen resultatet. Arbeidet gjentas hver gang noe bak panelet endres. Et fast toppfelt over en rullende side tegner uskarpheten på nytt i hver bilderamme.

Kostnaden følger to tall du styrer: elementets areal og radiusen. Et toppfelt på 64 piksler med 12px uskarphet er billig på nesten alt. Et heldekkende overlegg med 40px uskarphet over video kan miste bilderammer på en mellomklassetelefon. Helheten dekkes i ytelse for CSS-gradienter.

Hvorfor backdrop-filter ikke virker

Når uskarpheten ser ut til å gjøre ingenting, er årsaken nesten alltid én av noen få ting.

1. 1

   Kontroller at bakgrunnen er gjennomsiktig

   En ugjennomsiktig background: #fff dekker den uskarpe bakgrunnen helt. Bruk en alfaverdi som rgb(255 255 255 / 0.15).

2. 2

   Legg til Safari-prefikset

   Safari godtar egenskapen uten prefiks først fra versjon 18. Eldre iPhoner trenger fortsatt -webkit-backdrop-filter.

3. 3

   Se etter en backdrop root over elementet

   Et foreldreelement med filter, opacity under 1, en maske eller eget backdrop-filter begrenser hva barnet ser. Barnet gjør da bare forelderen uskarp, noe som ofte ser ut som ingen uskarphet.

4. 4

   Pass på fastplasserte barn

   Som filter gjør backdrop-filter elementet til referanseboks for barn med fast eller absolutt plassering. En fast meny i et glasstoppfelt plasserer seg i forhold til toppfeltet, ikke vinduet.

5. 5

   Sørg for at noe ligger bak

   Uskarphet over en flat farge er usynlig. Rull panelet over et bilde for å bekrefte at det virker.

En reserve som holder teksten lesbar

Gjennomskinnelige paneler er designet rundt uskarpheten. Uten den lar en hvit flate med 14 prosent opasitet over et travelt bilde teksten ligge rett på bildet, og kontrasten kollapser. Skriv den lesbare versjonen først, og oppgrader der nettleseren kan gjøre bakgrunnen uskarp.

/* 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;
  }
}

Kontroller kontrasten mot det vanskeligste punktet bak panelet, ikke gjennomsnittet. En hvit overskrift på glass som glir over en lys himmel, kan falle langt under forholdene i fargekontrast og tilgjengelighet. Mørkning med brightness(0.7) løser vanligvis dette sikrere enn kraftigere uskarphet.

Når du ikke trenger uskarphet

Mye frostet glass finnes bare for å gjøre ord lesbare over en travel bakgrunn. Hvis du kan designe bakgrunnen, løser en roligere variant problemet uten ekstra tegnekostnad. En myk gradient med lav kontrast bak et toppfelt trenger ikke panel. Se bakgrunner til nettsidens toppfelt og uskarpe bakgrunner, der uskarpheten bakes inn i bildet én gang fremfor å beregnes i hver bilderamme.

Den andre tilnærmingen er slik Gradiently håndterer lesbarhet: en Mark vet hvor ordene er og flytter det roligste området med best kontrast bak dem. Du trenger derfor aldri en boks eller uskarphet for å redde en overskrift.