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.

Generador de filtro CSS

Patio de juego CSS filter con sliders para blur, brillo, contraste, saturación, sepia, escala de grises, invert, hue-rotate y opacidad.

Funciona en tu navegador

Arrastra los sliders para cualquier combinación de funciones CSS filter y la vista previa se actualiza en vivo. Cada slider está conectado a una función (`blur(Npx)`, `brightness(N%)`, etc.); la salida las combina en orden de origen, lo cual importa - un blur antes de grayscale se ve distinto de grayscale antes de blur. Los preajustes recrean el look de filtros estilo Instagram como punto de partida.

Preajustes

Desenfoque0px

Brillo100%

Contraste100%

Saturación100%

Sepia0%

Escala de grises0%

Inversión0%

Rotación tono0deg

Opacidad100%

CSS

filter: none;

Vista previa

Cómo usarla

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é es?

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.

Cuándo usarla

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

Errores comunes

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.

Preguntas frecuentes

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.