CSS Filter Generator
Maak CSS-beeldfiltereffecten visueel — vervaging, helderheid, contrast, grijstinten en meer.
① Sleep schuifregelaars om filters aan te passen ② Upload je afbeelding om een voorbeeld te zien ③ Kopieer de CSS
Voorinstellingen
filter: none
1x
1x
1x
0
0
0px
0°
0
1
CSS-uitvoer
filter: none;
backdrop-filter (glasmorfisme)
backdrop-filter: none;
Wat is de CSS filter-eigenschap?
De CSS filter-eigenschap past grafische effecten toe op elk HTML-element — afbeeldingen, divs, video's, SVG's of hele secties. Het ondersteunt negen functies: blur(), brightness(), contrast(), grayscale(), sepia(), hue-rotate(), invert(), opacity() en saturate(). Meerdere filters worden gescheiden door spaties samengevoegd: filter: brightness(1.2) contrast(1.1) grayscale(0.3) — de volgorde is belangrijk. De eigenschap is GPU-versneld. Let op: filter creëert een nieuwe stapelcontext die het z-index-gedrag kan beïnvloeden.
Veelgestelde vragen
De CSS filter-eigenschap past visuele effecten toe op elementen: blur, brightness, contrast, grayscale, sepia, hue-rotate, invert, opacity en saturate.
Ja. CSS filter werkt op elk HTML-element. Let op: filter creëert een stapelcontext die het z-index-gedrag kan beïnvloeden.
Lijst meerdere filterfuncties gescheiden door spaties: filter: brightness(1.2) contrast(1.1) blur(2px). De volgorde is belangrijk.
hue-rotate(Ndeg) verschuift alle kleuren op het kleurenwiel met N graden. 0deg = geen verandering, 180deg inverteert tinten.
CSS filter biedt vereenvoudigde standaardeffecten. SVG filter is krachtiger met willekeurige compositing-bewerkingen.
CSS-filters activeren GPU-compositing. blur() is het duurst — grote waarden op grote elementen kunnen de framerate verlagen.
Combineer: filter: sepia(0.5) contrast(1.2) brightness(1.05). Zwart-wit: filter: grayscale(1) contrast(1.1).