Du lägger en halvtransparent meny över en färgstark bild, men bakgrunden ser fortfarande skarp ut. Börja med backdrop-filter: blur(8px), men effekten syns bara om elementet är transparent eller delvis transparent och rätt innehåll faktiskt ligger bakom det.
Välj filter efter vad som ska bli suddigt
filter: blur()suddar ut själva elementet och dess innehåll.backdrop-filter: blur()suddar ut pixlarna bakom ett element.- Genomskinlig bakgrund behövs för att bakgrundsoskärpan ska synas.
- En förälder med filter eller opacitet kan begränsa vad effekten når.
Välj filter efter vilket lager du vill sudda ut
En kort rad CSS kan ge två helt olika resultat. filter påverkar elementets egen rendering, medan backdrop-filter arbetar med det som syns bakom elementet. Jag tycker att just den skillnaden är det bästa stället att börja, eftersom många till synes trasiga effekter egentligen använder fel egenskap.
För att sudda ut en bild använder du exempelvis filter: blur(4px). Texten och bildens kanter blir då också suddiga. Ska ett kort eller en menyrad i stället ge en frostad glasyta, passar backdrop-filter bättre:
.glass-panel {
background-color: rgb(255 255 255 / 0.22);
backdrop-filter: blur(10px);
}Den svagt genomskinliga bakgrunden släpper igenom den visuella effekten. Med en helt ogenomskinlig vit bakgrund döljs innehållet bakom, så oskärpan får inget synligt genomslag.
En genomskinlig bakgrund avgör om glasytan syns
En frostad meny behöver något att sudda ut. Om området bakom menyn är enfärgat kan effekten finnas där utan att se särskilt tydlig ut; läggs menyn över en bild eller textur blir den lättare att upptäcka. Transparensen ska ligga i bakgrundsfärgens alfavärde, inte genom att sänka hela elementets opacitet.
.glass-panel {
background-color: rgb(255 255 255 / 0.18);
backdrop-filter: blur(12px);
}Sätter du i stället opacity: 0.8 på hela panelen påverkas även text, ikoner och andra barn. Det kan göra innehållet blekt och svårläst. backdrop-filter använder en genomskinlig yta för att visa bakgrundseffekten, vilket framgår av MDN:s dokumentation om backdrop-filter.
Förälderns filter kan stoppa oskärpan från att nå bakgrunden
Du kan ha rätt CSS och ändå få en panel som verkar ignorera bakgrunden. En orsak är att en förfader med exempelvis filter, opacity under 1 eller egen backdrop-filter kan skapa en gräns för vilken del av sidan effekten hämtar pixlar från.
Ta en panel inuti en wrapper med opacity: 0.9. Då kan oskärpan begränsas till innehållet inom den wrappern, i stället för att nå sidans bakgrund. Ta bort eller flytta den begränsande egenskapen och testa igen innan du ökar blur-värdet; ett starkare filter löser inte en felaktig lagergräns.
Välj egenskap med en enkel regel
Fråga dig vilket lager som ska bli mjukt. Den frågan leder oftast direkt till rätt CSS-egenskap, och du slipper lägga tid på att finjustera fel typ av oskärpa.
| Situation | Välj | Resultat |
|---|---|---|
| En bild ska suddas ut bakom rubrik eller etikett. | filter: blur() på bilden |
Bilden blir suddig; text i samma element påverkas också. |
| En meny ska sudda ut sidan bakom sig. | backdrop-filter: blur() på menyn |
Bakgrunden bakom menyn blir suddig; menyinnehållet förblir skarpt. |
| Bakgrunden ska förbli tydlig men se mjukare ut. | En halvtransparent bakgrund utan blur | Färgerna dämpas utan att detaljerna suddas ut. |
För ett kort med glasutseende skulle jag välja backdrop-filter och en svagt tonad bakgrund, eftersom texten då kan förbli skarp. För en bakgrundsbild bakom en rubrik skulle jag i stället lägga filter på bilden, så att rubriken inte blir suddig tillsammans med den.
Felsök i rätt ordning när effekten uteblir
När suddigheten inte syns är det frestande att dra upp värdet direkt. Börja hellre med den enklaste kontrollen: finns det synligt innehåll bakom elementet, och kan det passera genom elementets bakgrund?
| Symptom | Trolig orsak | Testa detta |
|---|---|---|
| Menyn ser helt skarp ut. | Bakgrunden är ogenomskinlig eller saknas bakom menyn. | Ge menyn en halvtransparent background-color och placera den över synligt innehåll. |
| Effekten syns bara på delar av bakgrunden. | En förfader skapar en gräns för bakgrundseffekten. | Kontrollera föräldrarnas opacity, filter och backdrop-filter. |
| Bilden blir suddig, men texten blir det också. | filter sitter på ett element som innehåller både bild och text. |
Flytta filtret till bildelementet eller skapa ett separat bakgrundslager. |
| Oskärpan syns på datorn men inte på en äldre enhet. | Webbläsaren eller enheten saknar stöd för just egenskapen. | Behåll en läsbar bakgrundsfärg som fungerar även utan oskärpan. |
En användbar detalj är att blur() fungerar både som filterfunktion för filter och för backdrop-filter. Funktionen ger en Gaussisk oskärpa, och värdet anges som en längd, till exempel 6px; större värden ger mer oskärpa. MDN:s referens för blur() beskriver funktionen och dess giltiga värden.
En lugn reservstil gör gränssnittet mer tåligt
Oskärpa ska hjälpa gränssnittet, inte bära hela läsbarheten. Låt därför menytexten ha tillräcklig kontrast även om bakgrundseffekten saknas, och ge elementet en halvtransparent färg som fortfarande fungerar utan filtret.
.glass-panel {
background-color: rgb(24 32 48 / 0.78);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
color: white;
}filter och blur() har brett stöd i moderna webbläsare, medan stöd för backdrop-filter kan variera på äldre enheter och webbläsarversioner. Prefixet i exemplet kan hjälpa i vissa äldre Safari-miljöer, men reservfärgen är det som håller innehållet användbart när själva glaseffekten uteblir.