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.

Gerador de filtro CSS

Playground CSS filter ao vivo com sliders para blur, brilho, contraste, saturação, sépia, escala de cinza, invert, hue-rotate e opacidade.

Roda no seu navegador

Arraste sliders para qualquer combinação de funções CSS filter e a pré-visualização atualiza ao vivo. Cada slider está ligado a uma função (`blur(Npx)`, `brightness(N%)`, etc.); a saída combina na ordem de origem, o que importa - blur antes de grayscale fica diferente de grayscale antes de blur. As predefinições recriam o visual de filtros estilo Instagram como ponto de partida.

Predefinições

Desfoque0px

Brilho100%

Contraste100%

Saturação100%

Sépia0%

Escala de cinza0%

Inversão0%

Rotação matiz0deg

Opacidade100%

CSS

filter: none;

Pré-visualização

Como usar

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.

O que é?

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.

Quando usar

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

Erros comuns

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.