Does filter order matter?

Yes. CSS filters are applied left-to-right, and many of them aren't commutative. `filter: blur(8px) grayscale(100%)` blurs the colour image first then desaturates the blurred result; `grayscale(100%) blur(8px)` desaturates first then blurs the greyscale. The visual difference is subtle for most pairs but obvious for blur + contrast or blur + drop-shadow.

Why is filter so much slower than background-color tricks?

Filters force the browser to allocate an offscreen canvas, render the element into it, run the filter shader, then composite the result. Light filters (brightness, contrast, saturate) are cheap; heavy ones (blur, drop-shadow with large radii) can drop a 60 fps animation to 20. Avoid filters on elements that animate or scroll constantly - apply them once and let the result composite.

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

`filter` applies to the element itself - the image inside the ` ` or the painted content of a ` `. `backdrop-filter` applies to whatever is rendered *behind* the element, visible through its background. Use `filter` for image effects (Instagram-style); use `backdrop-filter` for frosted-glass overlays sitting on top of an image. The glassmorphism generator covers the second case.

Can I animate the filter values?

Yes - `filter` is animatable in CSS transitions and keyframe animations. Each function interpolates independently, which is what you want for crossfading from sharp to blurred or colour to greyscale. The catch is performance: animating blur from 0 to 24 pixels stresses the GPU on most laptops. Test on the slowest device you support.

Why don't my filters work on the iframe content?

Cross-origin restrictions. CSS filters work fine on same-origin content (your own page, your own SVGs and images), but the browser refuses to filter cross-origin iframes or images served without `Access-Control-Allow-Origin: *`. Serve the asset from your own domain, or use a CORS-friendly CDN.

CSS-Filter-Generator

Live-CSS-Filter-Playground mit Slidern für Blur, Helligkeit, Kontrast, Sättigung, Sepia, Graustufen, Invert, Hue-Rotate und Deckkraft.

Läuft in deinem Browser

Slider für beliebige Kombinationen von CSS-Filter-Funktionen ziehen, die Vorschau aktualisiert sich live. Jeder Slider ist an eine Funktion gebunden (`blur(Npx)`, `brightness(N%)` usw.); die Ausgabe kombiniert sie in Quellreihenfolge, was zählt - Blur vor Graustufen sieht anders aus als Graustufen vor Blur. Presets bilden bekannte Instagram-Filter als Ausgangspunkt nach.

Voreinstellungen

Weichzeichnen0px

Helligkeit100%

Kontrast100%

Sättigung100%

Sepia0%

Graustufen0%

Invertieren0%

Farbrotation0deg

Deckkraft100%

CSS

filter: none;

Vorschau

So funktioniert's

Pick a preset (or skip)
Filter presets give you a starting point in one click. Skip and tune from scratch if you prefer.
Slide each function
Blur, brightness, contrast, saturate, sepia, grayscale, invert, hue-rotate, opacity - one slider per function.
Reorder if it matters
Mute or reorder functions when the visual result depends on order (blur + grayscale).
Copy the CSS
The combined `filter:` declaration is ready to paste into your stylesheet.

Was ist das?

The CSS `filter` property applies a graphical effect (blur, colour shift, contrast, etc.) to an element before it's composited. It's the modern web replacement for Photoshop adjustment layers and SVG `<filter>` chains - GPU-accelerated where the browser can, declarative, and stackable. Each function takes a single parameter (a length for blur, a percentage for most colour functions, an angle for hue-rotate) and produces an effect identical to its SVG-filter primitive equivalent.

Wann verwenden

Recreating Instagram-style image filters in CSS, dimming or desaturating hover states without swapping images, building photo galleries with subtle blur on inactive thumbnails, dimming background images behind hero text, applying brightness to images that look washed-out in dark mode, and one-line image debugging (`filter: invert(1)` to spot bad assets).

Häufige Fehler

Stacking too many filters on a large image - performance falls off a cliff. Animating `filter: blur()` for 'breathing' effects on hero images - even modest devices struggle. Putting `filter` on the same element as `backdrop-filter` (it works, but the interaction confuses people). Forgetting that filter applies to all children too - a parent with `filter: grayscale(1)` desaturates every child including video, even if the child is colourful.

FAQ

Does filter order matter?: Yes. CSS filters are applied left-to-right, and many of them aren't commutative. `filter: blur(8px) grayscale(100%)` blurs the colour image first then desaturates the blurred result; `grayscale(100%) blur(8px)` desaturates first then blurs the greyscale. The visual difference is subtle for most pairs but obvious for blur + contrast or blur + drop-shadow.
Why is filter so much slower than background-color tricks?: Filters force the browser to allocate an offscreen canvas, render the element into it, run the filter shader, then composite the result. Light filters (brightness, contrast, saturate) are cheap; heavy ones (blur, drop-shadow with large radii) can drop a 60 fps animation to 20. Avoid filters on elements that animate or scroll constantly - apply them once and let the result composite.
What's the difference between filter and backdrop-filter?: `filter` applies to the element itself - the image inside the `<img>` or the painted content of a `<div>`. `backdrop-filter` applies to whatever is rendered *behind* the element, visible through its background. Use `filter` for image effects (Instagram-style); use `backdrop-filter` for frosted-glass overlays sitting on top of an image. The glassmorphism generator covers the second case.
Can I animate the filter values?: Yes - `filter` is animatable in CSS transitions and keyframe animations. Each function interpolates independently, which is what you want for crossfading from sharp to blurred or colour to greyscale. The catch is performance: animating blur from 0 to 24 pixels stresses the GPU on most laptops. Test on the slowest device you support.
Why don't my filters work on the iframe content?: Cross-origin restrictions. CSS filters work fine on same-origin content (your own page, your own SVGs and images), but the browser refuses to filter cross-origin iframes or images served without `Access-Control-Allow-Origin: *`. Serve the asset from your own domain, or use a CORS-friendly CDN.