How can I make CSS glass / blur effect for overlay?

Question

I have problems applying the blur effect to the translucent Div overlay. I would like everything behind the div to be blurry, like this:

Here is the jsfiddle that does not work: http://jsfiddle.net/u2y2091z/

Any ideas how to make this work? I would like to keep this as simple as possible and make it cross-browser. Here is the CSS I'm using:

#overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background:black; background:rgba(0,0,0,0.8); filter:blur(4px); -o-filter:blur(4px); -ms-filter:blur(4px); -moz-filter:blur(4px); -webkit-filter:blur(4px); } 

Answer 1

Thanks for helping everyone! I managed to gather information from everyone here and from further Googling, and I came up with the following that works in Chrome and Firefox: http://jsfiddle.net/u2y2091z/12/ . I am still working on creating this work for IE and Opera.

The key places the content inside the div to which the filter applies:

 <div id="mask"> <p>Lorem ipsum ...</p> <img src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" /> </div> 

And then CSS:

 #mask { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: black; opacity: 0.5; filter: blur(10px); -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='svgMask'><feGaussianBlur stdDeviation='10' /></filter></svg>#svgMask"); } 

So, the filters are applied in the mask. Also note the use of url () for the filter with the <svg> for value - this idea came from http://codepen.io/AmeliaBR/pen/xGuBr . If you can minimize CSS, you may need to replace any spaces in the SVG filter markup with "% 20".

So now everything inside the div mask is blurry.

Answer 2

Here is an example that uses the svg filter.

The idea is to use the svg element with height in the same way as #overlay and apply the feGaussianblur filter to it. This filter is applied to the svg image element. To give it an extruded effect, you can use box-shadow at the bottom of the overlay.

Browser support for svg filters .

Codepen Demo

 body { background: #222222; } #container { position: relative; width: 450px; margin: 0 auto; } img { height: 300px; } #overlay { position: absolute; left: 0; top: 0; width: 100%; z-index: 1; color: rgba(130, 130, 130, 0.5); font-size: 50px; text-align: center; line-height: 100px; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); } 

 <div id="container"> <img src="http://lorempixel.com/450/300/sports" /> <div id="overlay">WET</div> <svg width="450" height="100" viewBox="0 0 450 100" style="position: absolute; top: 0;"> <defs> <filter id="blur"> <feGaussianBlur in="SourceGraphic" stdDeviation="3" /> </filter> </defs> <image filter="url(#blur)" xlink:href="http://lorempixel.com/450/300/sports" x="0" y="0" height="300px" width="450px" /> </svg> </div> 

Answer 3

If you are looking for a reliable cross-browser approach today, you will not find a great one. The best option you have is to create two images (this can be automated in some environments) and arrange them so that one overlays the other. I created a simple example below:

 <figure class="js"> <img src="http://i.imgur.com/3oenmve.png" /> <img src="http://i.imgur.com/3oenmve.png?1" class="blur" /> </figure> 

 figure.js { position: relative; width: 250px; height: 250px; } figure.js .blur { top: 0; left: 0; position: absolute; clip: rect( 0, 250px, 125px, 0 ); } 

Despite its effectiveness, even this approach is not necessarily ideal. At the same time, it gives the desired result .

Answer 4

A solution is possible here.

HTML

 <img id="source" src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" /> <div id="crop"> <img id="overlay" src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" /> </div> 

CSS

 #crop { overflow: hidden; position: absolute; left: 100px; top: 100px; width: 450px; height: 150px; } #overlay { -webkit-filter:blur(4px); filter:blur(4px); width: 450px; } #source { height: 300px; width: auto; position: absolute; left: 100px; top: 100px; } 

I know CSS can be simplified, and you should probably get rid of identifiers. The idea here is to use a div as a container for cropping, and then apply blur to a duplicate image. Fiddle

To make this work in Firefox, you have to use hack SVG .

Answer 5

 #bg, #search-bg { background-image: url('https://images.pexels.com/photos/719609/pexels-photo-719609.jpeg?w=940&h=650&auto=compress&cs=tinysrgb'); background-repeat: no-repeat; background-size: 1080px auto; } #bg { background-position: center top; padding: 70px 90px 120px 90px; } #search-container { position: relative; } #search-bg { /* Absolutely position it, but stretch it to all four corners, then put it just behind #search z-index */ position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 99; /* Pull the background 70px higher to the same place as #bg */ background-position: center -70px; -webkit-filter: blur(10px); filter: url('/media/blur.svg#blur'); filter: blur(10px); } #search { /* Put this on top of the blurred layer */ position: relative; z-index: 100; padding: 20px; background: rgb(34,34,34); /* for IE */ background: rgba(34,34,34,0.75); } @media (max-width: 600px ) { #bg { padding: 10px; } #search-bg { background-position: center -10px; } } #search h2, #search h5, #search h5 a { text-align: center; color: #fefefe; font-weight: normal; } #search h2 { margin-bottom: 50px } #search h5 { margin-top: 70px } 

 <div id="bg"> <div id="search-container"> <div id="search-bg"></div> <div id="search"> <h2>Awesome</h2> <h5><a href="#">How it works »</a></h5> </div> </div> </div> 

Answer 6

For a simpler and more relevant answer:

 backdrop-filter: blur(6px); 

Please note that browser support is not perfect, but in most cases the blur will be negligible.

Answer 7

I came up with this solution.

Click to view blurry effect image.

This is a kind of trick that uses an absolutely positioned child div , sets its background image to the same as the parent div and then uses the CSS background-attachment:fixed property along with the same background properties set for the parent element.

Then you apply filter:blur(10px) (or any value) to the child of the div.

 *{ margin:0; padding:0; box-sizing: border-box; } .background{ position: relative; width:100%; height:100vh; background-image:url('https://images.unsplash.com/photo-1547937414-009abc449011?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'); background-size:cover; background-position: center; background-repeat:no-repeat; } .blur{ position: absolute; top:0; left:0; width:50%; height:100%; background-image:url('https://images.unsplash.com/photo-1547937414-009abc449011?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'); background-position: center; background-repeat: no-repeat; background-attachment: fixed; background-size:cover; filter:blur(10px); transition:filter .5s ease; backface-visibility: hidden; } .background:hover .blur{ filter:blur(0); } .text{ display: inline-block; font-family: sans-serif; color:white; font-weight: 600; text-align: center; position: relative; left:25%; top:50%; transform:translate(-50%,-50%); } 

 <head> <title>Blurry Effect</title> </head> <body> <div class="background"> <div class="blur"></div> <h1 class="text">This is the <br>blurry side</h1> </div> </body> </html> 

look at the code