Browser-onlyNo uploadsAlways free
About Us·Contact

100+ tools · No signup · Always free

CSS Filter Generator

Build CSS filter values with a live image preview. Tune blur, brightness, contrast, hue and drop-shadow — copy CSS, Tailwind and React output instantly.

BrightnessSaturateHue RotateDrop Shadow6 PresetsCSS · TW · React

How to use

1

Pick a preset or start fresh

Click a preset like Vintage, Cinematic or Black & White for an instant look, or build from scratch using the filter sliders. Presets are a one-click starting point you can fine-tune.

2

Adjust the filter sliders

Drag Blur, Brightness, Contrast, Saturate, Grayscale, Sepia, Hue Rotate, Invert and Opacity. Every change updates the live preview and the generated code at the same time.

3

Add a drop shadow

Set X / Y offset, blur radius and a shadow colour. The drop-shadow() filter follows the real alpha shape of your image — ideal for transparent PNGs and logos.

4

Copy CSS, Tailwind or React

Switch the output tab and hit copy. CSS ships with the -webkit-filter prefix; Tailwind gives a JIT arbitrary-property class; React gives an inline style object. Upload your own image to preview on real content.

Common use cases

Image galleries

Desaturate thumbnails with grayscale() and reveal full colour on hover with a filter transition — a polished, performant gallery effect with no JavaScript.

Hero & banner grading

Apply a cinematic grade — boosted contrast, a touch of sepia and lowered brightness — to hero images so overlaid white text stays readable.

Consistent photo style

Normalise photos from many sources to one brand look by applying the same saturate / contrast / sepia recipe across a product grid or blog.

Dark-mode media

Use invert() + hue-rotate() to adapt diagrams, screenshots and charts for dark themes without maintaining a second set of assets.

Hover & focus states

Brighten, blur or shift hue on interactive cards and buttons for tactile feedback that's GPU-accelerated and smooth.

Logo & icon shadows

drop-shadow() traces the true silhouette of transparent PNGs and SVG icons, casting realistic shadows that box-shadow cannot produce.

How CSS filters work

What are CSS filters?

Filters are graphical effects applied to an element during rendering, after layout but before compositing. Each filter function transforms the pixels — adjusting colour, blur or transparency — so you can edit images and elements live in the browser with zero image-processing on a server.

The filter property

filter accepts a space-separated list of functions applied in order: blur(px), brightness(%), contrast(%), saturate(%), grayscale(%), sepia(%), hue-rotate(deg), invert(%), opacity(%) and drop-shadow(x y blur color). 100% is the neutral value for percentage filters; 0 is neutral for blur, sepia, grayscale and invert.

drop-shadow vs box-shadow

drop-shadow() is a filter function that follows the element's real alpha channel, so transparent PNGs, SVGs and clip-path shapes cast a silhouette-accurate shadow. box-shadow only follows the rectangular box. Use drop-shadow for logos and cut-out images.

Browser support

filter is supported across Chrome 53+, Firefox 35+, Safari 9.1+ and Edge 79+ — over 97% of users. This tool emits the -webkit-filter prefix alongside the standard property for maximum coverage on older WebKit browsers.

Related tools

CSS Mask Generator

Fade, shape, divider and SVG mask-image effects with live preview.

Box Shadow Generator

Multi-layer shadows, neumorphism and glow with Tailwind export.

CSS Gradient Generator

Linear, radial and conic gradients with live preview and presets.

CSS Animation Generator

16 presets, keyframe editor, hover and loading animations.

Frequently asked questions

Quick answers about this free online tool.

The CSS filter property applies graphical effects like blurring, colour shifting and brightness adjustments to an element before it is rendered. It accepts one or more filter functions — blur(), brightness(), contrast(), saturate(), grayscale(), sepia(), hue-rotate(), invert(), opacity() and drop-shadow() — applied left to right. filter works on images, videos, backgrounds and any HTML element, and is GPU-accelerated in modern browsers.

List the filter functions space-separated in a single filter declaration — for example filter: contrast(120%) saturate(130%) sepia(20%). The browser applies them in order, so the sequence matters: grayscale(100%) followed by sepia(100%) gives a different result than the reverse. This generator outputs the functions in a consistent, predictable order so your results are reproducible.

filter applies effects to the element itself (its content and box). backdrop-filter applies the same family of effects to whatever is behind the element — most commonly used for frosted-glass / glassmorphism panels with backdrop-filter: blur(10px). Both accept the same filter functions. This tool generates the filter property; to blur the background instead of the element, copy the value into backdrop-filter.

Yes — filter is supported in all modern browsers: Chrome 53+, Firefox 35+, Safari 9.1+ and Edge 79+. Global support exceeds 97%. Older WebKit builds need the -webkit-filter prefix, which this tool includes automatically. The drop-shadow() filter is widely supported and, unlike box-shadow, follows the alpha shape of the element (so it traces PNG transparency and clipped shapes).

box-shadow casts a rectangular shadow based on the element's box, ignoring transparency. The drop-shadow() filter follows the actual rendered alpha — so a transparent PNG, an SVG icon, or an element with clip-path / border-radius casts a shadow that traces its real silhouette. The trade-off is that drop-shadow cannot be inset and offers fewer tuning options than box-shadow.

Filters are GPU-accelerated and composited, so static filters are cheap. blur() is the most expensive function, especially at large radii or on large elements, and animating filters can cause repaint cost on lower-end devices. For animations, prefer transform/opacity where possible, add will-change: filter to promote the element to its own layer, and keep blur radii modest.

Add a transition to the filter property and change the value on :hover — for example: .thumb { filter: grayscale(100%); transition: filter .3s ease; } .thumb:hover { filter: grayscale(0%); }. This is a common gallery pattern: images appear desaturated and reveal full colour on hover. You can transition between any two filter values as long as they use the same filter functions.

filter applies to the whole element including its content, so applying it directly to a container also filters its text. To filter only a background image, put the image on a dedicated child or pseudo-element (e.g. ::before with the background and a filter) and keep the text in a separate, unfiltered layer above it. backdrop-filter is the cleaner option when you want to blur whatever sits behind a panel.