Skip to content
Gridtray

CSS Filter Generator

Load your own image, adjust nine CSS filters with live before and after, start from a preset, then copy the filter CSS or download the edited image.

Image

It stays on your device.

Filters

px
%
%
%
%
%
°
%
%
Original
Original
With filters
With filters
Download the filtered image at full size
CSS
filter: none;

How to use the css filter generator

  1. Use your own image, or start with the sample.
  2. Pick a preset or move the sliders. Only filters you change appear in the CSS.
  3. Compare the original and filtered versions side by side.
  4. Copy the filter line, or download the result as PNG.

Order matters

CSS applies filters left to right, each to the result of the last, so contrast(150%) brightness(80%) can look different from the reverse. This tool writes them in a fixed order that matches the preview.

Good uses

  • Hover states that brighten or desaturate images without a second file.
  • Dimming a hero image so text on top stays readable.
  • grayscale(100%) for logo walls that color on hover.

The PNG download uses the canvas filter API. Browsers without it save the image unfiltered.

Questions

Is my image uploaded?

No. The image is loaded and filtered in your browser.

What is the difference between filter and backdrop-filter?

filter changes the element itself; backdrop-filter changes what is behind the element. For frosted glass, see the glassmorphism generator.