What is the difference between filter and backdrop-filter?

filter affects the element you put it on. backdrop-filter affects the pixels behind that element. Glass panels use backdrop-filter. Photo treatments use filter.

CSS Studio

Interactive Learning

On this tool

filter: blur() also blurs the element’s text and border. Use backdrop-filter on a panel if you only want the background blurred.

Filters

filter paints the whole element, including its children. It is not the same as backdrop-filter, which blurs what is behind the element.

What people get wrong

filter: blur() also blurs the element’s text and border. Use backdrop-filter on a panel if you only want the background blurred.

What is the difference between filter and backdrop-filter?: filter affects the element you put it on. backdrop-filter affects the pixels behind that element. Glass panels use backdrop-filter. Photo treatments use filter.

Filters

Image Source

Upload

Color Adjustments

Brightness100%

Contrast100%

Saturation100%

Hue Rotate0deg

Effects

Blur0px

Grayscale0%

Sepia0%

Invert0%

Opacity100%

Generated CSS

From the controls