Blur scrolling-div content behind an element using pure CSS

#beginners #css #html

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>

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

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

Top comments (4)

TechSlugz • Apr 8 '23

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!