Backdrop filter i CSS: frostat glas som förblir snabbt

Ett backdrop filter i CSS tillämpar en grafisk effekt, oftast blur, på det som ligger bakom ett element. Skriv backdrop-filter: blur(12px) på ett element med en delvis genomskinlig bakgrund så mjuknar sidan under det, vilket är det frostade glasutseende som används i navigeringsfält, paneler och kort. Det stöds i alla aktuella webbläsare. Hantverket ligger i att hålla den suddade ytan liten, radien måttlig och reserven läsbar.

Grundreceptet för frostat glas

Tre saker gör glas: en genomskinlig fyllning så att bakgrunden syns, själva suddigheten och en svag kant så att panelen får en form. De flesta lägger också till en liten mättnadshöjning, eftersom blur medelvärdesbildar färger och lämnar dem gråare än du väntar dig.

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

Glas ser bara ut som glas när det finns något värt att sudda bakom. På en platt grå sida ser panelen bara dunkel ut. Lägg den över ett fotografi eller en rik gradient, som glassmorphism förklarar mer ingående.

Vad funktioner i backdrop-filter kan göra

Egenskapen tar samma funktioner som filter, och du kan kedja dem i en deklaration. De tillämpas i ordning, från vänster till höger, så blur() följt av saturate() beter sig annorlunda än tvärtom. Hela listan finns på MDN.

Prestanda för backdrop filter

Blur är något av det dyrare en webbläsare ritar. För att sudda en region måste den läsa varje pixel bakom elementet, ta prover av grannarna ut till suddradien och sammanfoga resultatet, och den upprepar arbetet varje gång något bakom panelen ändras. En klistrig header över en rullande sida ritar om sin blur i varje bildruta av rullningen.

Kostnaden skalar med två siffror du styr: elementets yta och radien. En header på 64 pixlar suddad med 12px är billig på nästan allt. Ett helskärmsöverlägg suddat med 40px över en video kan tappa bildrutor på en mellanklassmobil. Den bredare bilden finns i CSS-gradienters prestanda.

Varför backdrop-filter inte fungerar

När blurren verkar inte göra något är orsaken nästan alltid en av en kort lista.

1. 1

   Kontrollera att bakgrunden är genomskinlig

   En solid background: #fff täcker den suddade bakgrunden helt. Använd ett alfavärde som rgb(255 255 255 / 0.15).

2. 2

   Lägg till Safari-prefixet

   Safari accepterar bara den oprefixade egenskapen från version 18. Äldre iPhones behöver fortfarande -webkit-backdrop-filter.

3. 3

   Leta efter en backdrop root ovanför

   En förälder med filter, opacity under 1, en mask eller ett eget backdrop filter begränsar vad barnet kan se. Barnet suddar då bara den föräldern, vilket ofta ser ut som ingen blur alls.

4. 4

   Se upp med fixed-barn

   Liksom filter gör ett backdrop filter elementet till innehållande block för fixed- och absolut positionerade barn. En fixed meny inuti en glasheader placerar sig mot headern, inte fönstret.

5. 5

   Se till att något finns bakom

   Blur över en platt färg syns inte. Rulla panelen över en bild för att bekräfta att det fungerar.

En reserv som håller texten läsbar

Genomskinliga paneler är utformade runt blurren. Utan den lämnar en vit fyllning på 14 procent över ett rörigt foto texten sittande på själva fotot, och kontrasten kollapsar. Skriv den läsbara versionen först och uppgradera den sedan där webbläsaren kan sudda.

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

Kontrollera kontrasten mot den sämsta punkten bakom panelen, inte medelvärdet. En vit rubrik över glas som driver över en ljus himmel kan hamna långt under förhållandena i färgkontrast och tillgänglighet. Att mörkna med brightness(0.7) löser det oftast mer tillförlitligt än att sudda hårdare.

När du inte behöver någon blur alls

Mycket frostat glas finns bara för att göra ord läsbara över en rörig bakgrund. Om bakgrunden är din att designa löser en lugnare problemet utan renderingskostnad. En mjuk gradient med låg kontrast bakom en hero behöver ingen panel; se webbplatsens herobakgrunder och suddiga bakgrunder, där suddigheten bakas in i bilden en gång i stället för att beräknas varje bildruta.

Det andra tillvägagångssättet är hur Gradiently hanterar läsbarhet: en Mark vet var orden finns och flyttar sin lugnaste, mest kontrasterande region bakom dem, så du behöver aldrig en ruta eller en blur för att rädda en rubrik.