🪞

CSS Filter Builder (Visual)

Visual builder for CSS filter — blur, brightness, contrast, sepia, hue-rotate, drop-shadow. 8 presets: Vintage / Polaroid / Noir / Instagram-style.

All tools

Presets

Blur (px): 0 Brightness (%): 100 Contrast (%): 100 Saturate (%): 100 Grayscale (%): 0 Sepia (%): 0 Invert (%): 0 Hue rotate (deg): 0 Opacity (%): 100

Drop shadow

X Y Blur Color

Preview

CSS

CSS Filter — apply effects to images or elements. GPU-accelerated. Great for gallery effects, Instagram-style filters, hover transitions.

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.