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.

Générateur de filtre CSS

Terrain de jeu CSS filter avec curseurs pour blur, luminosité, contraste, saturation, sépia, niveaux de gris, inversion, hue-rotate et opacité.

Fonctionne dans votre navigateur

Glissez les curseurs pour toute combinaison de fonctions CSS filter et l'aperçu se met à jour en direct. Chaque curseur est câblé à une fonction (`blur(Npx)`, `brightness(N%)`, etc.) ; la sortie combine dans l'ordre source, ce qui compte - un blur avant niveaux de gris diffère d'un niveaux de gris avant blur. Les préréglages recréent l'allure des filtres Instagram comme point de départ.

Préréglages

Flou0px

Luminosité100%

Contraste100%

Saturation100%

Sépia0%

Niveaux de gris0%

Inversion0%

Rotation teinte0deg

Opacité100%

CSS

filter: none;

Aperçu

Comment l'utiliser

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.

Qu'est-ce que c'est ?

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.

Quand l'utiliser

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).

Erreurs courantes

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.