Make the div transparent like a blurry mirror

Question

I want to make the background div transparent, so I used this css

-webkit-filter: blur(1px); -moz-filter: blur(1px); -ms-filter: blur(1px); -o-filter: blur(1px); filter: blur(1px); 

also see this script: http://jsfiddle.net/LUy3W/

I want the div to be blurry, but the entire contents of this div is also blurry. How to make only blur the background div and make its contents visible like regular text?

any thoughts? please, help.

Answer 1

Content cannot be inside a blurry div element, so use a sibling element instead:

HTML

 <div class="wrapper"> <div class="content">my text</div> </div> 

CSS

 .wrapper { height:400px; width:400px; position: relative; } .wrapper::before{ width:100%; height:100%; position: absolute; background-image:url('https://i.imgur.com/iAgdW.jpg'); background-size:cover; -webkit-filter: blur(4px); -moz-filter: blur(4px); -ms-filter: blur(4px); -o-filter: blur(4px); filter: blur(4px); } .content{ position: absolute; background-color:red; } 

Demo violin

Answer 2

For example.

html

 <div class="div-Blur"> <div class="div-inside-blur"> </div> </div> 

css

 .div-Blur { -webkit-filter: blur(1px); -moz-filter: blur(1px); -ms-filter: blur(1px); -o-filter: blur(1px); filter: blur(1px); } 

edit: try this file

 .div-inside-blur { background: blue; -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); } 

Answer 3

Now this can be done with a single CSS line using the backdrop-filter property (along with many other filter effects ), however the browser support at the time of writing is very poor, so be sure to provide a fallback option, as well as a -webkit- version with a prefix for this moment.

 .wrapper { height: 400px; width: 400px; background-image: url('https://i.imgur.com/iAgdW.jpg'); background-size: cover; } .inner { background-color: rgba(255, 0, 0, 0.5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); padding: 50px; } 

 <div class="wrapper"> <div class="inner">my text</div> </div> 

Rendering output in supported browsers will look like this: