CSS Filter Generator

Build CSS filter effects with blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate and sepia. Compare original and filtered previews on a sample or your own image, copy or download the CSS, and save the filtered picture as PNG or JPG.

Developer Runs client-side Free to use

Jump to the tool

About the CSS Filter Generator

CSS Filter Generator combines the nine standard CSS filter functions — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate and sepia — into one filter property. Adjust each with a slider or exact number and compare the original and filtered previews side by side, using a built-in sample picture or a PNG, JPG or WebP image from your device.

Only the filters you change appear in the generated CSS, in a fixed and documented order. Copy the code or download it as a .css file, or save the filtered image itself as a PNG (keeping transparency) or a JPG (flattened onto a background colour you choose). The image is processed in your browser and is never uploaded.

How to use

Optionally choose your own image; otherwise the sample is used.
Adjust the filter sliders and compare the two previews.
Copy the CSS or download filter.css.
Choose PNG or JPG (and a JPG background colour).
Click Download filtered image to save the picture.

Key features

Blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate and sepia.
Original and filtered previews side by side.
Sample image or your own local PNG, JPG or WebP.
Only changed filters included in the CSS.
Filtered image download as PNG or JPG with a chosen background.
Copy CSS, download .css and full Reset.

Best practices

Use filters for subtle effects such as hover states and image treatments.
Check text contrast when filtering images behind text.
Remember filter order changes the result.
Prefer PNG when the image has transparency.
Large blur values on big images can be slow to render.

Benefits

Instant visual feedback for every filter.
Copy-ready CSS with no unused values.
Save edited images without other software.
Private: images stay on your device.

Frequently asked questions

Why does the order of filters matter?

Filters are applied one after another, so grayscale followed by sepia looks different from sepia followed by grayscale. This tool always uses the order shown on the page.

Why does blur look weaker in the downloaded image?

Blur is measured in pixels. The preview shows a scaled-down image, while the download is filtered at full size, so the same blur covers a smaller share of a large picture.

What happens to transparency in JPG downloads?

JPG cannot store transparency, so transparent areas — including those created by the opacity filter — are filled with the JPG background colour you choose.

Is the filtered image saved with the CSS?

No. The CSS and the image download are separate. The CSS applies the filter in the browser; the download saves a new image file with the effect baked in.

Which browsers support CSS filters?

All modern browsers support the filter property. Saving a filtered image uses canvas filtering, which works in current Chrome, Edge and Firefox; if it is not available, the tool tells you.

Is my image uploaded?

No. It is opened and filtered entirely in your browser and is not saved anywhere.

Is anything uploaded or saved?

No. The CSS is generated by JavaScript in your browser. Settings and any image you choose stay on your device and are not saved in browser storage; Reset clears them.