CSS-filter generator

Hoe je dit gebruikt CSS-filter generator

1. Stel de filters in die je wilt combineren.
2. Zet het achtergrondeffect aan voor matglas.
3. Kopieer de resulterende CSS.

De beschikbare filters

Ze worden toegepast met de eigenschap filter en kun je met spaties aan elkaar rijgen.

De volgorde telt: filters worden na elkaar toegepast, dus blur() gevolgd door contrast() geeft iets anders dan andersom.

drop-shadow() verdient een aparte vermelding omdat het iets kan wat box-shadow niet kan: de werkelijke vorm van een transparante PNG of een SVG volgen in plaats van de rechthoek van het element.

Een praktisch en weinig bekend gebruik: heel hoge blur() en contrast() over gestapelde elementen geeft een versmeltingseffect tussen vormen, zonder enige bibliotheek.

Matglas en zijn valkuilen

Het effect is in de mode en kent twee bekende problemen.

Je maakt het met backdrop-filter: blur(), dat vervaagt wat áchter het element zit in plaats van het element zelf, plus een halftransparante achtergrond erover.

Het eerste probleem is de leesbaarheid. Tekst op een vervaagde achtergrond heeft onvoorspelbaar contrast, want dat hangt af van wat erachter langs komt. Een glaspaneel over een lichte foto en daarna over een donkere geeft tegengestelde resultaten.

De oplossing is niet op de vervaging vertrouwen voor het contrast: voeg een halftransparante achtergrondkleur toe die dekkend genoeg is om de tekst hoe dan ook contrast te geven.

Het tweede probleem is de prestatie. backdrop-filter dwingt de browser om het gebied erachter per frame samen te stellen en te vervagen, en dat is een van de duurste bewerkingen in CSS.

Gebruik het op weinig elementen en op kleine oppervlakken: een vaste navigatiebalk of een modaal venster, niet op een lijst met twintig kaarten. Op goedkopere telefoons is het verschil goed merkbaar.

Wanneer je ze niet moet gebruiken

Een paar aandachtspunten die problemen schelen.

Een filter op een element maakt een nieuwe stapelcontext en een bevattend blok voor afstammelingen met position: fixed. Een vast element binnen een gefilterde container gedraagt zich daardoor niet meer vast — een bijzonder verwarrende fout om te vinden.

Bij grote afbeeldingen dwingen CSS-filters een bewerking af bij elke hertekening. Is het effect permanent, exporteer de afbeelding dan al bewerkt.

Animeer blur() niet rechtstreeks: dat is een van de duurste dingen die je kunt animeren. Wil je een overgang, animeer dan de dekking tussen twee lagen, een scherpe en een al vervaagde.

Respecteer prefers-reduced-motion bij elke filteranimatie: bewegende vervagingseffecten geven klachten bij mensen die daar gevoelig voor zijn.

En controleer het resultaat altijd in de donkere modus. Matglas dat op een lichte achtergrond is afgestemd, is na het omdraaien van het palet vaak onherkenbaar.

Veelgestelde vragen