loading...
Cover image for Blur scrolling-div content behind an element using pure CSS

Blur scrolling-div content behind an element using pure CSS

temmietope profile image Temitope Ayodele ・1 min read

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

Discussion

pic
Editor guide
Collapse
thomasbnt profile image
Thomas Bnt

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

Collapse
craigallen profile image
Craig Allen

Very cool!