CSS Filter Effects Generator
Visually build CSS filter effects with live preview, presets, and instant code output.
Presets
Filters
Generated CSS
Live Preview
Gradient + shapes preview
Filter Property Reference
blur(px)
Applies a Gaussian blur. Value is the radius in pixels. Larger values create more blur. Default: 0.
brightness(%)
Adjusts image brightness. 0% is completely black, 100% is normal, 200%+ makes it brighter. Default: 100%.
contrast(%)
Adjusts contrast. 0% is completely gray, 100% is normal, 200%+ increases contrast. Default: 100%.
grayscale(%)
Converts to grayscale. 0% is unchanged, 100% is fully grayscale. Default: 0%.
hue-rotate(deg)
Rotates hue on the color wheel. 0deg is unchanged, 180deg shifts all colors to their complement. Default: 0deg.
invert(%)
Inverts colors. 0% is unchanged, 100% is fully inverted. 50% produces a mid-gray. Default: 0%.
opacity(%)
Sets transparency. 0% is fully transparent, 100% is fully opaque. Hardware-accelerated unlike the opacity property. Default: 100%.
saturate(%)
Adjusts color saturation. 0% is desaturated, 100% is normal, 200%+ is super-saturated. Default: 100%.
sepia(%)
Applies a sepia tone. 0% is unchanged, 100% is fully sepia-toned (yellowish-brown). Default: 0%.
Pro Tips: CSS filters can be combined in any order. The order matters:
blur(5px) brightness(150%) gives a different result than brightness(150%) blur(5px). Use backdrop-filter instead of filter to apply effects to the area behind an element (great for frosted glass effects). Filters trigger GPU acceleration for smoother animations.
Explore 269 Free Tools
Browse 269 free tool pages and inspect the open-source implementation on GitHub.