CSS background-filter

CSS Update

The CSS background-filter property can be used to apply filter effects to background of the element. This can be used to achieve iOS-like frosted glass effects.

This is different from the CSS filter property which applies effects to the complete element. background-filter applies effects to the area behind the element.

All CSS filter functions such as blur(), brightness(), contrast(), grayscale() etc can be applied. Multiple filters can be used as well.

The overlaying element or its background must be partially transparent to see the filter effects.

#modal {
	-webkit-background-filter: blur(10px);
	background-filter: blur(10px);
	background-color: rgba(255, 255, 255, 0.5);
}

Browser Compatibility

Tutorials & Resources

March 28, 2020

Comments

Loading Comments