Blur scrolling-div content behind an element using pure CSS



To blur the scrolling div content behind an element, the backdrop-filter css property is used. The div is assigned a backdrop-filter property and also given a slightly transparent background color (e.g rgba(255, 255, 255, 0.85))

<div class="wrapper">
<div class="box">Whatever is behind this div is blurred out</div>
body {
margin: 0;
.wrapper {
max-width: 100vw;
background-image: url(;
background-color: #cccccc;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
.box {
position: fixed;
top: 30%;
left: 40%;
color: ${props=>props.theme.paragraph}
font-weight: bolder;
width: 20%;
padding: 1rem;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.5);
-webkit-backdrop-filter: blur(4px);
-o-backdrop-filter: blur(4px);
-moz-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);

Valid Example

A sample usage of this is to blur the div scrolling behind the navbar in an application. See the sample code below

I hope this helps.

Work with me?

Interested in working together? We should queue up a chat. I'll buy the coffee!

Frontend and Web Accessibility Engineer


Designed and Developed by me