CSS filter() Builder
Visually build a CSS filter() rule.
Overview
The CSS filter() Builder visually composes a filter: shorthand from blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, and sepia, with a live preview on a sample image. Multiple filters chain in order, applied as the browser composites the element.
Useful for designers and front-end developers learning how to build a CSS filter chain or how to apply a drop-shadow to a transparent PNG. Reach for it when styling hero images, hover effects, broken-image placeholders, and the desaturated-on-hover gallery look.
How it works
The CSS Filter Effects Module Level 1 defines filter as a space-separated list of filter functions. Each function applies in order before the element is composited with what's behind it. drop-shadow() is filter-aware — unlike box-shadow, it follows the alpha channel, so transparent PNGs cast a shape-true shadow.
The builder validates angle units on hue-rotate() (degrees, turns), percentage clamps on brightness/contrast/saturate (over 100% boosts; under 100% dims), and the length-colour signature of drop-shadow(). It also surfaces the GPU compositing implications of backdrop-filter for frosted-glass backgrounds.
Examples
- A faded thumbnail →
filter: grayscale(100%) opacity(0.7);. - An icon-shaped shadow on a PNG →
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));. - Hover hue shift →
filter: hue-rotate(60deg) saturate(1.2);. - A frosted glass card →
backdrop-filter: blur(12px) saturate(180%);.
FAQ
filter vs backdrop-filter?
filter applies to the element itself. backdrop-filter applies to whatever is rendered behind a translucent element, producing the frosted-glass effect.
drop-shadow vs box-shadow?
box-shadow follows the element's bounding box (clipped to border-radius). drop-shadow follows the alpha channel of the content — including image transparency.
Does filter affect layout?
No. Filters are paint-time effects and do not change the element's box.
Why does my filter cause text to look blurry?
Any filter (even filter: opacity(1)) creates a stacking context and forces GPU compositing, which can subtly resample text. Apply filters only to wrapper elements, not to elements containing critical text.