What this builds
CSS filter chains, the property that applies graphics effects directly in CSS. Each filter function (blur, brightness, contrast, etc.) is a slider; combine multiple to get layered effects. The preview is a colorful SVG so you can see what your filter does to a vivid image without uploading anything.
The output panel shows the generated CSS line. Copy it and apply to any element: <img class="my-img" /> plus .my-img { filter: blur(2px) brightness(110%); } works on images, divs, SVG, even text.
Eight presets
The preset row covers most common combinations:
- None: clean slate, no filters applied
- Vintage: sepia tint with reduced saturation and bumped contrast, faded photo feel
- B&W: full grayscale
- Punch: high contrast and saturation for vivid social-media-style images
- Faded: low contrast, low saturation, dreamy, washed out
- Inverted: full color inversion (negative)
- Cool: hue rotated toward blue, moody/atmospheric
- Warm: hue rotated toward orange, golden-hour feel
Tune from there with individual sliders.
Each filter function explained
blur(Npx): Gaussian blur in pixels. 2-4px is mild; 10+ is heavy. Useful for glassmorphism backdrops or “out of focus” effects. Costs significant render performance for large elements.
brightness(N%): multiply pixel values. 100% is unchanged, 0% is black, 200% is bright/blown-out. For darkening images on hover, ~80% is subtle.
contrast(N%): push pixel values away from gray. 100% is unchanged. 130-150% adds punch. Below 50% looks washed out.
saturate(N%): vibrancy. 0% is grayscale, 100% is normal, 200%+ is super-saturated and unnatural. Combine with brightness adjustments for stylized looks.
hue-rotate(Ndeg): rotates the entire color wheel. 0° is unchanged, 180° flips colors to their complement, 360°/-360° wraps back to unchanged. Useful for “duotone” effects when combined with grayscale.
grayscale(N%): desaturation. 0% is normal, 100% is pure black-and-white. Mix with sepia for old-photo looks.
sepia(N%): applies a brown/yellow tint. 100% is full sepia (looks like an old photograph). Often paired with reduced saturation for vintage effects.
invert(N%): color inversion. 100% inverts everything (white becomes black). Can be useful for dark mode hacks but produces strange results on photos.
opacity(N%): element opacity. Identical to the standalone opacity property when used alone, but inside a filter chain it composes correctly with other filters.
Multiple filters compose left-to-right
The CSS spec applies filters in the order written. filter: blur(4px) brightness(110%) blurs first, then brightens the blurred result. Reversing the order produces a slightly different output. The generator places filters in a sensible default order, but you can edit the output manually if order matters for your effect.
Filters vs Photoshop
CSS filters are a small subset of what image-editing software can do, optimized for live render performance. They can’t do:
- Local adjustments (only global)
- Curves or levels
- Layer-based compositing
- Custom convolution kernels (well, technically they can with SVG filters but that’s a different beast)
- Anything path/selection-based
For genuine photo editing, do the work in image software and export. CSS filters are for live UI effects (hover states, glassmorphism, image transitions).
Performance considerations
Some filter functions are cheap (opacity, brightness), some are expensive (blur). On mobile, heavy blur on large elements can drop frame rate noticeably. If you’re animating filters, profile in Chrome DevTools’ Performance panel to make sure you’re hitting 60fps.
The browser may use GPU acceleration for filters when possible, adding will-change: filter to the element can help in animated cases.
Frequently asked questions
Can I animate CSS filters? Yes, filters are animatable with CSS transitions and keyframes. Common patterns: hover-grayscale on portfolio images, blur-on-modal-open for backdrops, saturation pulse on call-to-action buttons.
Why does blur look pixelated? Browsers apply blur as a Gaussian convolution, which can show stair-stepping at the edges if the element has a hard background. Add a few extra pixels of element size or a soft transparent fade at the edges.
Filters and accessibility? Filters are decorative and shouldn’t carry meaning. Don’t rely on color filters to convey state changes, pair with text or icon changes for screen readers.
Backdrop-filter vs filter?
backdrop-filter applies the filter to whatever’s behind the element (for glassmorphism effects). filter applies to the element itself. Useful to know, they’re related but not interchangeable.