In dit artikel
CSS Filter-eigenschap uitgelegd
De CSS filter-eigenschap past grafische effecten toe zoals vervaging, helderheid, contrast en kleurverschuivingen op elk HTML-element. Het werkt op afbeeldingen, achtergronden, tekst en zelfs hele paginasecties. Filters worden verwerkt door de GPU van de browser, waardoor ze efficiënt zijn voor visuele effecten in real-time.
CSS biedt negen ingebouwde filterfuncties: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate en sepia. Deze kunnen worden gekoppeld in één filterdeclaratie om complexe visuele effecten te creëren. De volgorde van filters is belangrijk — elke functie verwerkt de uitvoer van de vorige.
Hoe elke filterfunctie werkt
Elke filterfunctie neemt één waarde en transformeert de visuele uitvoer van het element. Begrijpen wat elke functie doet helpt je ze effectief te combineren.
- blur(px) — past een Gaussiaans vervagingseffect toe, waardoor het element onscherp lijkt. Hogere waarden creëren een sterkere vervaging. Nuttig voor achtergrondoverlays en matglas-effecten
- brightness(%) en contrast(%) — brightness schaalt de algehele lichtheid (100% is ongewijzigd, 200% is dubbel), terwijl contrast het verschil tussen lichte en donkere gebieden aanpast
- grayscale(%), sepia(%) en hue-rotate(deg) — grayscale verwijdert kleurverzadiging, sepia voegt een warme bruine tint toe, en hue-rotate verschuift alle kleuren rond het kleurenwiel
Probeer gratis — geen aanmelding vereist
Genereer CSS-filters →Instagram-achtige effecten maken
Door meerdere CSS-filterfuncties te stapelen, kun je populaire fotofiltereffecten volledig in code nabootsen. Deze effecten worden in real-time toegepast op elk beeldelement.
- Vintage look — combineer sepia(60%) met contrast(110%) en brightness(90%) voor een warm, vervaagd foto-effect dat doet denken aan oude filmcamera's
- Zwart-wit — gebruik grayscale(100%) met contrast(120%) voor een monochroom effect met hoog contrast. Voeg brightness(110%) toe voor een helderder zwart-wit-beeld
- Dramatische sfeer — stapel contrast(150%) met saturate(130%) en brightness(80%) voor een levendige, verdonkerde atmosfeer waar kleuren opvallen tegen diepe schaduwen
Veelgestelde vragen
Kan ik SVG-filters gebruiken met de CSS filter-eigenschap?
Ja. De url()-functie binnen CSS filter stelt je in staat om aangepaste SVG-filterdefinities te refereren voor effecten buiten de ingebouwde functies. Dit maakt geavanceerde effecten mogelijk zoals verplaatsingskaarten en kleurmatrices.
Beïnvloeden CSS-filters de prestaties?
CSS-filters zijn GPU-versneld in moderne browsers, waardoor ze efficiënt zijn voor de meeste toepassingen. Enkele filters op afbeeldingen hebben minimale prestatie-impact. Echter, vervaging toepassen op grote gebieden of meerdere filters tegelijk animeren kan frameverliezen veroorzaken op minder krachtige apparaten.
Kunnen filters geanimeerd worden bij hover?
Ja. CSS-filters werken naadloos met transities en animaties. Een veelgebruikt patroon is het standaard toepassen van een grayscale of blur filter en het overgaan naar de originele look bij hover, wat soepele GPU-versnelde hover-effecten creëert.