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.
Unlock 100+ Premium Tools
Get the NexTool Pro with templates, workflows, and AI prompts for just $29.