In what order do filter functions apply?

CSS applies filters in the exact left-to-right order you write them. Saturation before grayscale and grayscale before saturation give different results; the generator emits a consistent order so the result is stable across copies.

Why does brightness 100% show no change?

100% is the neutral identity value for `brightness()` — it does nothing. Same goes for `contrast(100%)`, `saturate(100%)`, and `opacity(100%)`. The generator drops these from the output to keep the chain short.

What is the difference between `filter: blur()` and `backdrop-filter: blur()`?

`filter: blur()` blurs the element itself. `backdrop-filter: blur()` blurs whatever is rendered behind a partially-transparent element — the frosted-glass effect. This tool builds `filter:`; for backdrop work, copy the output and rename the property.

Are CSS filters expensive to render?

Blur and large filter chains are GPU-bound and can drop frame rate on low-end devices, especially when applied to large images or animated. For static images they are essentially free.

Can I filter the page background or a video?

Yes — CSS filters apply to any element including ` ` and the document ` `. The same declaration the generator emits works without modification.

CSS Image Filter Generator

CSS filter chain builder with brightness, hue, blur, sepia and more.

Written by Golam Rabbani, Founder & Lead Engineer

This interactive tool requires JavaScript. Read the formula and worked example below; you can compute the result by hand.

How to use this css image filter generator

Optionally upload an image — the file is read with FileReader and never leaves your browser. If you skip it, a built-in gradient preview is used.
Move the sliders for brightness, contrast, saturation, grayscale, sepia, invert, hue rotate, blur, and opacity.
Watch the live preview update — only the filter functions that differ from their neutral value end up in the output.
Press Generate CSS to surface the result panel.
Click Copy CSS to copy a single `filter: …;` declaration ready to paste into a stylesheet.

About this css image filter generator

The CSS image filter generator builds a CSS `filter:` chain by composing the nine standard filter functions: `brightness()`, `contrast()`, `saturate()`, `grayscale()`, `sepia()`, `invert()`, `hue-rotate()`, `blur()`, and `opacity()`. The tool omits any function whose value matches its neutral default (100% for brightness/contrast/saturate/opacity, 0% for grayscale/sepia/invert, 0deg/px for hue-rotate/blur) so the output stays minimal — you only get the functions you actually changed. A live preview pane sits above the controls so it paints first as the LCP element and reflects the current filter chain in real time.

Worked example: set brightness=110, contrast=120, saturate=140, hue-rotate=20, blur=0, leave everything else at neutral. The tool emits `filter: brightness(110%) contrast(120%) saturate(140%) hue-rotate(20deg);` — a warm, punchy photo look. Switch grayscale to 100 and the chain becomes `filter: brightness(110%) contrast(120%) saturate(140%) grayscale(100%) hue-rotate(20deg);`, a high-contrast black-and-white. Apply that to any `<img>` element by adding `class="filtered"` plus a CSS rule with the copied declaration.

FAQ

In what order do filter functions apply?: CSS applies filters in the exact left-to-right order you write them. Saturation before grayscale and grayscale before saturation give different results; the generator emits a consistent order so the result is stable across copies.
Why does brightness 100% show no change?: 100% is the neutral identity value for `brightness()` — it does nothing. Same goes for `contrast(100%)`, `saturate(100%)`, and `opacity(100%)`. The generator drops these from the output to keep the chain short.
What is the difference between `filter: blur()` and `backdrop-filter: blur()`?: `filter: blur()` blurs the element itself. `backdrop-filter: blur()` blurs whatever is rendered behind a partially-transparent element — the frosted-glass effect. This tool builds `filter:`; for backdrop work, copy the output and rename the property.
Are CSS filters expensive to render?: Blur and large filter chains are GPU-bound and can drop frame rate on low-end devices, especially when applied to large images or animated. For static images they are essentially free.
Can I filter the page background or a video?: Yes — CSS filters apply to any element including `<video>` and the document `<body>`. The same declaration the generator emits works without modification.