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?
🎨
Photoshop in one CSS rule
Brightness, contrast, saturation, hue rotation, sepia, blur — every adjustment a photo editor offers, applied to any DOM element with a single line of CSS. No image processing, no extra requests.
✨
GPU-accelerated effects
Filters run on the compositor thread, so they're fast. Stack multiple filters on hovers, scroll-driven animations, or theme transitions without dropping frames.
🪞
Perfect drop-shadows for non-rectangles
box-shadow follows the rectangular box. drop-shadow() follows the alpha channel — so transparent PNGs, SVGs, and clip-path shapes get shadows that match their actual silhouette.
🎯
One brand, infinite moods
Build hover states that desaturate, dark-mode previews that invert, hero images that shift hue with the time of day — all from one source asset, controlled entirely in CSS.
▶
How to use this generator
01
Pick a preset or start fresh
Pick a curated look (BW, vintage, cinematic, noir, ghost) as a starting point, or hit none to begin from a blank state and dial in each value yourself.
02
Drag any slider
Brightness, contrast, saturation, sepia, blur, hue-rotate, opacity, grayscale, invert — all standard filter functions. Identity values (100% brightness, 0px blur) are auto-omitted from the output to keep the CSS tidy.
03
Toggle drop-shadow
Add an alpha-aware drop-shadow on top of every other filter. X / Y offset, blur, and an editable colour string — perfect for transparent SVG icons or clip-path silhouettes.
04
Compare and copy
The Compare toggle splits the canvas into Original vs Filtered. When the filtered version looks right, click Copy CSS and paste the rule onto any element.
/* 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
01
Order matters
filter: blur(4px) brightness(120%) does not equal brightness(120%) blur(4px). The browser applies functions left-to-right; a tiny reorder can change the look entirely.
02
drop-shadow vs box-shadow
box-shadow draws around the rectangular box. drop-shadow respects the alpha channel — pick it for transparent images, SVG icons, and any element with a clip-path or border-radius beyond a simple rect.
03
Watch performance on large surfaces
Filters are GPU-friendly but still cost memory at the size they're applied to. Avoid blur(20px) on a fullscreen hero — apply it to a smaller layer or use backdrop-filter on a translucent overlay instead.
04
backdrop-filter for glass UI
filter blurs the element itself. backdrop-filter blurs whatever sits behind it — the right pick for translucent navbars, modals, and frosted overlays.