Make a div transparent like a blurred mirror

Question

I want to make a div background 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 fiddle: http://jsfiddle.net/LUy3W/

I want only the div to be blurred but all the content in that div is also being blurred. How to make only that background div blur and make its content visible like normal text?

any thoughts? please help.

Answer 1

This can now be accomplished with a single line of CSS using the backdrop-filter property (along with many other filter effects), however browser support at the time of writing is very poor, so make sure to provide a fallback version for unsupported browsers as well as the -webkit- prefixed version for now.

.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>

The rendered output in supported browsers will look like:

Answer 2

The content can't be inside the blurred div, 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 fiddle