How to Blur Background Behind Elements in CSS

You can use the backdrop-filter property in CSS to blur the background image behind an element with a transparent background:

.background {
    background-image: url(castle.jpg)
}

.backdrop {
    backdrop-filter: blur(1);
}

It applies to everything behind the element where the backdrop-filter is defined, therefore make sure you make the element at least partially transparent in order to see the result. This property is often used to blur out the background behind a popup.

Also, this not only works with blur, but with other filter functions as well.

.backdrop {
    backdrop-filter: brightness(50%);
    backdrop-filter: contrast(50%);
    backdrop-filter: drop-shadow(0 0 5px #000);
    backdrop-filter: grayscale(100%);
    backdrop-filter: hue-rotate(90deg);
    backdrop-filter: invert(100%);
    backdrop-filter: opacity(50%);
    backdrop-filter: sepia(100%);
    backdrop-filter: saturate(100%);
}

10 Best Practices for Quickly Improving Your CSSBuilding scalable and manageable stylesheetsCSS has its own nuances that can make or break your design. Here are 10 tips for CSS :  best practices that can help you bring out the best from your styles.Learn More

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

Looking to improve your skills? Master CSS from start to finish.

---

Resources:

• The backdrop-filter property in CSS