If you have used Safari on iOS or macOS, you might have noticed when you scroll a website, the content of the website is blurred. In the recent update of Windows 10, the Settings app also appear translucent, which means the window at the top display the contents of window behind them blurred. This makes the UI appealing and I always wanted to implement the same on my website. I want to blur content behind div on scroll with CSS like iOS or recent Windows. Till now, the only way to blur a div is using filter property of CSS but this property does not blur the contents behind the content but it blurs content of the div. We want to blur content behind div on scroll with CSS. Let me assume, you have a navigation bar which is position: fixed and as you scroll the content of the page, the content of the page should appear blurred as it passed through the navigation bar. As a first step, let me write an HTML code for navigation bar and content.
Now let me add CSS for the navtigation bar so it appears fixed at the top of the screen. This will be a dark colored background with 50% opacity so we can view any content behind the div.
body, html { font-family: 'Calibri'; margin: 0px; width: 100%; } nav { width: 100%; height: 70px; background: rgba(0,0,0, 0.5); border: 1px solid #0e0e0e; border-width: 0 0 1px 0; position: fixed; backdrop-filter: blur(10px); } .nav-content { width: 700px; margin: 0 auto; padding: 5px; } .nav-content p { color: #fff; line-height: 10px; font-weight: bold; font-size: 26px; }
The backdrop-filter property of CSS will blur content behind div on scroll. This backdrop-filter property is currently not available in latest stable web browsers but the feature will roll out very soon in the coming days. Google Chrome 75 and below will support blackdrop-filter but you need to enable Experimental Web Platform features under chrome://flags. 
If you want to make your website future ready, then you can go ahead and use the backdrop-filter CSS property to your web elements. The current browsers will not render but the stable browsers will hopefully get this feature this year. Google Chrome 76 and above will support backdrop-filter CSS property. Also, Microsoft Edge (Chromium) Dev Channel and Canary Channel currently supports them. Currently, Google Chrome Canary supports backdrop-filter. Hence, download a Canary version of Microsoft Edge or Google Chrome. Safari 9 and above currently supports this CSS property with a prefix of -webkit . Firefox is not currently supporting backdrop-filter CSS property but hopefully in the future it should get support. The remaining CSS code for the content:
.content { clear: both; width: 700px; margin: 0 auto; padding-top: 100px; } .content p { font-size: 28px; }
To see a demo, you can visit this page in Google Chrome Canary or Microsoft Edge Canary and you will see that the navigation bar is fixed and the content behind navigation bar appears blurred on scroll. Also, you can see the Codepen to check the code and output. 
If you have any questions, let me know in the comments below.