CSS Filter Builder (Visual)

What is CSS Filter?

The CSS filter property applies graphic effects to an element — like Photoshop filters but pure CSS. GPU-accelerated, so it's fast enough to animate on hover/scroll.

9 main filter functions

• blur(px): blurring. Use for frosted-glass effects.
• brightness(%): 0 = black, 100 = original, 200 = twice as bright.
• contrast(%): 0 = grey, 100 = original, 200 = punchier.
• saturate(%): 0 = black & white, 100 = original, 200 = vivid.
• grayscale(%): 0-100. 100 = fully grayscale.
• sepia(%): warm yellow-brown vintage tone.
• hue-rotate(deg): shift the color wheel. 180deg = inverted hues.
• invert(%): invert. 100 = negative.
• drop-shadow(...): shape-aware shadow (different from box-shadow which uses the bounding box).

Combining filters

Filters stack on a single element:

filter: blur(2px) brightness(110%) saturate(150%);

Order MATTERS — blur before brightness gives different results than blur after.

Tips

• Hover effect: transition: filter 0.3s for smooth hover.
• backdrop-filter: filters what's BEHIND the element (frosted glass for modals, sidebars). Same syntax.
• SVG drop-shadow vs box-shadow: drop-shadow follows the actual shape (e.g. a star casts a star-shaped shadow). box-shadow follows the bounding rectangle.
• Performance: GPU-rendered, basically free. But blur with a very large radius (> 50px) can be slow.