Blur Background using CSS

Filter property

The filter property is used to apply visual effects to an element (like photoshop filters for web). Mostly it is used for images, background and border. Filter functions (<filter-function>) include :

blur() , brightness() , contrast() , drop-shadow() , grayscale() , hue-rotate() , invert() , opacity() , saturate() , sepia() , url() , none

syntax for filter property

Blur using filter property

Filter property blurs the background as well as content of the element.

HTML

CSS

What if you want to blur only the background and not the content of the element, scroll to the top for example!

Backdrop-filter property

The backdrop-filter property is very similar to filter property, the difference is, backdrop-filter only apply effects to the background of the element. The effects are not applied to the content of the element.

Blur using backdrop-filter property

backdrop-filter property blurs only the background of the element.

HTML

CSS

Summary

Both filter and backdrop-filter has same filter-functions, same syntax (apart from property name!).

Filter Property : Filter effects are applied to background as well as content of element.

Backdrop-filter Property : Filter effects are applied to background only.