CODEWITHSUNDEEP
javascripthtmlcss
Boris
Boris

Reputation: 836

CSS3 blur overlay

I am trying to create overlay that would cover whole site page and blur everything that is behind it. I searched for solution, tried multiple versions with CSS3 blur filter, but without success. Main problem is when body tag have background, it is not blurred.

Toy example:

body
{
  background: url("https://upload.wikimedia.org/wikipedia/commons/8/8a/Too-cute-doggone-it-video-playlist.jpg");
   
}

h1
{
  text-align: center;
}

#overlay
{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  -webkit-filter: blur(10px);
}
<html>
<head></head>
<body>
  <h1>
     Text
  </h1>
  
  <div id="overlay">
      overlay
  </div>
</body>
</html>

I want to try to blur everything behind overlay div. If I add blur to h1 (or if I wrap it inside other div and add blur on that div) I could reach near solution, but without blur of background.

Is there any solution that could fulfil all requests?

Idea is to create a JavaScript file, that would do this programatically so that I could use on multiple pages.

Upvotes: 3

Views: 8824

Answers (2)

Lyres
Lyres

Reputation: 341

This could probably be solved more easily now using css property backdrop-filter: blur(5px);

Upvotes: 5

jdmdevdotnet
jdmdevdotnet

Reputation: 1

You can use the filter property with blur, although it's not widely supported: http://jsfiddle.net/GkXdM/1/. It's supported on Chrome, but it comes with a big performance penalty when used on the whole page.

body {
    filter: blur(2px);
}

Or you can just use a div that's full screen (like you have) and just adjust the z-index. I wouldn't suggest putting an background on the body though. No reason for that.

Upvotes: 3

Related Questions