CSS Filter Generator

Features

• Nine filters: blur, brightness, contrast, saturation, hue rotate, grayscale, sepia, invert, opacity
• Switch between foreground filter and background backdrop-filter
• Background mode adds a colourful demo backdrop, so blur and saturation are visible
• Five presets: frosted glass, black and white, vintage, high contrast, neon
• Neutral items are omitted, so no useless blur(0px) appears
• backdrop-filter comes with its -webkit- prefixed line as well
• The delivered CSS carries a comment about both traps, in your language
• Every change redraws the preview instantly, with no Generate button
• Everything is computed in your browser; nothing is uploaded

How to use

1. Choose what to apply it to: foreground filter or background backdrop-filter
2. Start from a preset, or set the preset to custom and drag the sliders yourself
3. Watch the preview and tune until it looks right
4. Copy the CSS below; the prefixed line and the comment come with it

FAQ

What is the difference between filter and backdrop-filter?

`filter` acts on the element itself: a blur will smear its own text and border too. `backdrop-filter` acts on what is behind the element: it processes what is underneath while the element stays sharp, which is how frosted glass is made, together with a translucent background colour. So use backdrop-filter to blur the wallpaper behind a card, and filter to make a whole block grey or brighter.

Why does my backdrop-filter do nothing?

The most common cause is an ancestor with `filter` or `transform`. Both establish a containing block or a compositing layer on the ancestor, so the backdrop the filter relies on is no longer the area it expects, and the whole declaration stops working. Walk up the ancestor chain to find it. Less common causes are a missing `-webkit-` prefix (on Safari) and a backdrop that is simply a flat colour — a flat colour blurred is still a flat colour, which looks like nothing happened. The background mode here adds a colourful backdrop precisely so the effect is visible.

Why is there no blur() when the blur is zero?

Because `blur(0px)` is an identity transform that does nothing. It lengthens the code, makes people afraid to delete it, and in some browsers any `filter` value creates a compositing layer that lifts the area onto the GPU. So this tool checks item by item and omits neutral values. With every slider at neutral, the output is `filter: none` rather than an empty string — an empty string is an invalid declaration and the shell would drop it entirely.

Can one element use filter and backdrop-filter together?

Yes. They are independent declarations and can both be set: `filter` processes the element pixels, `backdrop-filter` processes what lies behind. Do watch ordering and performance, since both may trigger compositing layers; combining them in long lists or animations can affect frame rate. This tool generates one at a time, so generate twice and merge if you need both.