CSS Filter Generator
About this generator
Build CSS filter chains visually with live before/after preview. 9 filter functions — blur, brightness, contrast, grayscale, invert, saturate, sepia, hue-rotate, opacity — plus optional drop-shadow with full x/y/blur/color control. Identity values (brightness 100%, etc.) are auto-omitted from the output so the exported CSS stays short and intent-clear.
13 curated presets — none, B&W, vintage, warm, cool, dreamy, faded, cinematic, noir, pop, invert, blur, ghost. Pick one as a starting point, then tune. Compare toggle splits the canvas into original / filtered side-by-side so you can see exactly what the filter is doing.
Permalink: every adjustment encodes into the URL hash. No login, no watermark, no paywall. Free and MIT-licensed.
Why use CSS filters?
How to use this generator
Filter function reference
| Function | Before | After |
|---|---|---|
blur(8px) | sharp | soft, frosted |
brightness(150%) | normal | 50% lighter |
contrast(150%) | normal | punchier blacks |
grayscale(100%) | colour | fully desaturated |
invert(100%) | normal | colours inverted |
saturate(200%) | normal | vivid pop |
sepia(80%) | normal | warm vintage tone |
hue-rotate(90deg) | red | shifted toward green |
opacity(50%) | opaque | half-transparent |
drop-shadow(0 8px 16px rgba(0,0,0,.3)) | flat | lifted, alpha-aware |
Filter patterns
/* Hover: desaturate to grey */
.thumb {
filter: none;
transition: filter 250ms ease;
}
.thumb:hover {
filter: grayscale(100%) brightness(0.9);
}/* Cinematic poster look */
.poster {
filter:
contrast(130%)
saturate(130%)
brightness(95%)
sepia(5%);
}/* drop-shadow follows alpha — perfect for PNGs / SVGs */
.icon {
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15))
drop-shadow(0 1px 2px rgba(0, 0, 0, 0.10));
}
/* Compare with box-shadow on a transparent SVG —
box-shadow draws around the bounding rect, drop-shadow follows the shape. */Pro tips
Frequently asked questions
What's the difference between filter: drop-shadow() and box-shadow?
box-shadow follows the element's rectangular bounding box. drop-shadow follows the element's actual alpha channel — including transparent regions. On an SVG icon with cutouts, a transparent PNG, or any element with an irregular silhouette, box-shadow draws a rectangle outline of the bounding box (visibly wrong). drop-shadow conforms to the visible shape. Use drop-shadow for: SVG icons, transparent PNGs, text effects, irregular shapes. Use box-shadow for: rectangular cards, buttons, panels — it's GPU-accelerated and cheaper to paint.
Are CSS filters GPU-accelerated?
Yes — filter, opacity, and transform all run on the GPU compositor thread. The browser promotes the filtered element to its own layer and renders the filter in a single GPU pass per frame. This makes filters cheap to animate (60fps blur transitions are common). The trade-off: each filtered element costs GPU memory for its compositor layer. Hundreds of filtered elements on one page can spike GPU memory — limit aggressive filters to interactive elements rather than applying them to every card on a long list.
Why do my filters look slightly different in Safari?
Safari and Chrome use different filter shaders for some functions, especially blur. Safari's blur is calibrated to look more like Apple's system blur (slightly softer, slightly cooler). Chrome's is more clinical. Differences are usually 1-3px equivalent — imperceptible at typical UI sizes. If pixel-perfect consistency matters (e.g., product photography overlays), test in both browsers. For all functional filters (grayscale, sepia, invert, brightness, contrast, saturate, hue-rotate, opacity), output is identical across browsers.
Can I animate CSS filters?
Yes. transition: filter 0.3s ease works on all evergreen browsers. Animating from one filter chain to another is well-supported but the chains MUST have the same filter functions in the same order — animating from blur(5px) to grayscale(100%) doesn't work (different functions). For correct animation, write filter: blur(5px) grayscale(0%) and filter: blur(0) grayscale(100%) so both states have both functions. The generator's exported CSS already includes all your tuned filters; pair with a transition declaration for the smooth effect.
What's the order of filter functions? Does it matter?
Yes, filters are applied in the order written — each function operates on the output of the previous one. blur(5px) saturate(150%) blurs first, then saturates the blurred result. saturate(150%) blur(5px) saturates first, then blurs the saturated result. The visual difference is subtle but real. The generator outputs filters in a deterministic order (blur, brightness, contrast, grayscale, invert, saturate, sepia, hue-rotate, opacity, drop-shadow) that produces the most intuitive result for most use cases.
Why are 100% and 0 considered 'identity' (no effect)?
Each filter function has an identity value that produces no visible change: blur(0), brightness(100%), contrast(100%), grayscale(0%), invert(0%), saturate(100%), sepia(0%), hue-rotate(0deg), opacity(100%). When you set a slider to its identity value, the generator omits that function from the output CSS — keeping the rule short and intent-clear. A 5-filter chain that's actually just 'brightness 110%' compiles down to filter: brightness(110%); not a 9-function chain mostly at identity.
Is this free for commercial use?
Free, MIT-licensed, zero attribution required, no watermark, no signup. Use on any project — personal, client, enterprise — without permission.
See it used in real designs
Browse hand-coded collections that put this tool to work.
