Blur scrolling-div content behind an element using pure CSS
#beginners#css#html
Temitope Ayodele

Temitope Ayodele @temmietope

About: Frontend and Web Accessibility Engineer passionate about optimizing for web performance, user experience and accessibility.

Location:
Nigeria
Joined:
Jun 2, 2019

Blur scrolling-div content behind an element using pure CSS

Publish Date: Nov 19 '20
40 4

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))

HTML 
<div class='wrapper'>
  <div class='box'>Whatever is behind this div is blurred out</div>
</div>
Enter fullscreen mode Exit fullscreen mode
CSS 
body {
  margin: 0;
}
.wrapper {
  max-width: 100vw;
  background-image: url(https://images.pexels.com/photos/5491161/pexels-photo-5491161.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  background-color: #cccccc; 
  height: 500px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.box {
  position: fixed;
  top: 30%;
  left: 40%;
  color: #333;
  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);
}
Enter fullscreen mode Exit fullscreen mode

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

Comments 4 total

  • Thomas Bnt
    Thomas BntNov 19, 2020

    The blur is a nice design for navbar. I already integrated that on one of my project. Pretty cool!

  • Craig Allen
    Craig AllenNov 19, 2020

    Very cool!

  • Manan Varma
    Manan VarmaOct 6, 2021

    This was so helpful! Exacty what I was looking for. Thank you so much!

  • TechSlugz
    TechSlugzApr 8, 2023

    Thank you for such a great little application of css. This is something that I will utilize time and time again but in many different ways! Amazing how many great little css tricks there are that are so simple to impliment if you know how, yet they are often powerful and affective. I believe somebody has mentioned the nav bar use case already, but I am mentioning it again! It is a great way to use this. You can alter it slightly and it opens up so many more innovative ways it can be used. Thank you to Miss Ayodele :D my new besty!

Add comment