CSS-filtergenerator

De filterfuncties

De volgorde van ketenen doet ertoe

filter: brightness(0.5) saturate(2) past eerst helderheid toe en daarna verzadiging; de twee filters stapelen op elkaar.

filter: saturate(2) brightness(0.5) past eerst verzadiging toe. Omdat het beeld helderder is voordat het donkerder wordt gemaakt, komt de kleurverzadiging duidelijker uit.

Het visuele verschil is subtiel, maar reëel. Probeer beide volgordes wanneer de filterketen er niet uitziet zoals je verwacht.

Veelgebruikte recepten

/* Vervaagde fotolook */
filter: contrast(0.9) saturate(0.85) brightness(1.05);

/* Vintage / vervaagd */
filter: sepia(0.3) contrast(1.1) brightness(0.95);

/* Duotoonbenadering */
filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(1.5);

/* Hero-afbeelding verdonkeren */
filter: brightness(0.6);

/* Uitgeschakelde staat */
filter: grayscale(1) opacity(0.6);

/* Matglazen overlay */
filter: blur(12px) saturate(1.3);

backdrop-filter voor matglas

filter geldt voor het element zelf; backdrop-filter geldt voor wat zich achter een halftransparant element bevindt – het matglaseffect dat iOS populair maakte.

.modal-backdrop {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px) saturate(1.2);
}

Ondersteuning: alle moderne browsers; Firefox ondersteunt het sinds versie 103 eindelijk zonder vlag.

Prestatietips

• blur() is het duurste filter, omdat elke pixel met een kernel moet worden geconvolueerd. Een vervaging van 30px op een 4K-hero-afbeelding kost echte beeldframes.
• grayscale, sepia, brightness en dergelijke zijn kleurtransformaties per pixel – goedkoop.
• In moderne browsers worden filters door de GPU versneld, maar het animeren van blur() hapert nog steeds op zwakkere apparaten.
• Stel bij voorkeur will-change: filter in voordat je animeert.

filter: drop-shadow() versus box-shadow

• box-shadow volgt de border-box van het element (respecteert border-radius).
• filter: drop-shadow() volgt de niet-transparante pixels van het element, en tekent dus de vormen van clip-path, de transparantie van PNG en de contouren van SVG na.

Gebruik drop-shadow voor schaduwen op bijgesneden of transparante afbeeldingen; voor gewone kaarten en vakken is box-shadow sneller.