What does the CSS filter property do?

It applies graphical effects like blur or color shifts to an element and everything inside it.

What's the difference between filter and backdrop-filter?

filter changes the element itself; backdrop-filter changes what is visible behind it (used for glass effects).

Yes. Click Copy CSS to put the code on your clipboard, or Download CSS to save a .css file. You can also edit the code by hand before copying.

No. The CSS is generated in your browser from the settings you choose. The tool keeps working offline once the page has loaded.

Yes. The page address updates as you change settings, so the Share button copies a link that restores your exact configuration.

Adjust visual filters with sliders and see the effect instantly. The generator only outputs filter functions that differ from their defaults.

Last updated: 2026-07-21 · Runs 100% in your browser

// controls

Presets

Blur0px

Brightness110%

Contrast120%

Grayscale0%

Hue rotate0deg

Invert0%

Saturate140%

Sepia0%

Opacity100%

Live preview

Generated CSS

.filtered {
  filter: brightness(110%) contrast(120%) saturate(140%);
}

.filtered {
  filter: brightness(110%) contrast(120%) saturate(140%);
}

01Adjust the controls on the left or pick a preset to start the CSS Filter Generator.
02Watch the live preview update instantly as you change each setting.
03Fine-tune the generated CSS by hand in the code panel if you like.
04Click Copy CSS or Download CSS, or Share to send a link to your design.

Your data never leaves your browser. This tool runs 100% locally — no upload, no logging, no analytics on your inputs.