Wat is CSS Filter Generator?
De CSS Filter Generator is een visuele speeltuin voor de CSS filter-eigenschap. In plaats van filter: blur(3px) grayscale(50%) handmatig te typen, past u schuifregelaars aan voor elke functie.
Snel antwoord
Pas CSS-filters toe op een voorbeeldelement of afbeelding. Pas elke filter aan met schuifregelaars en zie het resultaat direct. Kopieer de CSS filter-eigenschap.
Last updated: 2026-06-11
Beperkingen
- De drop-shadow-filterfunctie is niet inbegrepen.
- Het voorbeeld gebruikt de CSS filter-eigenschap die op het hele element wordt toegepast.
- Afbeeldingsvoorbeeld vereist een openbare HTTPS-URL.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Zo gebruik je deze tool
- Pas de filterschuifregelaars aan: Blur, Brightness, Contrast, Grayscale, Hue-rotate, Invert, Saturate, Sepia en Opacity.
- Bekijk het live voorbeeld dat in realtime wordt bijgewerkt op een kleurrijke verloopstaal.
- Plak optioneel een openbare afbeeldings-URL om filters op een echte foto te testen.
- Kopieer de CSS filter-eigenschap uit het uitvoerpaneel.
Waarvoor je het kunt gebruiken
- CSS-filtercombinaties bekijken voordat u ze toepast op een afbeeldingsgalerij.
- Filterwaarden testen op een productfoto voor de beste grijstint-naar-kleuren animatie.
- Snel een sepia-filter CSS genereren voor een vintage fotogalerij.