CSS Filter Generator
Genereer CSS-filtereffecten visueel. Pas vervaging, helderheid, contrast, grijstinten, tintrotatie, inversie, dekking, verzadiging en sepia aan met live preview. Gratis.
Of sleep een afbeelding naar het voorbeeld
Referentie
Wat is de CSS filter eigenschap?
De CSS-eigenschap filter past grafische effecten toe zoals vervaging, kleurverschuiving en contrastaanpassing op een element.
Alle CSS-filterfuncties
blur(px): Past Gaussiaanse vervaging toe.
brightness(%): Past helderheid aan. 100% = origineel.
contrast(%): Past contrast aan.
grayscale(%): Converteert naar grijstinten.
hue-rotate(deg): Roteert kleuren op het kleurenwiel.
invert(%): Inverteert kleuren.
opacity(%): Past transparantie aan.
saturate(%): Past kleurverzadiging aan.
sepia(%): Past sepiatoon toe.
Prestatieoverwegingen
CSS-filters worden GPU-versneld in moderne browsers. Gebruik will-change: filter op geanimeerde elementen voor optimale prestaties.
Veelvoorkomende toepassingen
Afbeelding hover-effecten — grijstinten in rust, kleur bij hover.
Uitgeschakelde status — filter: grayscale(100%) opacity(50%).
Donkere modus — filter: invert(1) hue-rotate(180deg).
Achtergrondvervaging — backdrop-filter: blur(10px).
Privacy
Alle filtergeneratie draait 100% in je browser. Er worden geen gegevens naar een server gestuurd.