Make a div transparent like a blurred mirror

css blur
Raghavendra picture Raghavendra · Dec 2, 2013 · Viewed 61.6k times · Source

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

Mike picture Mike · Apr 9, 2019

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:

Output

Related questions

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

I am having trouble applying a blur effect on a semi-transparent overlay div. I'd like everything behind the div the be blurred, like this: Here is a jsfiddle which doesn't work: http://jsfiddle.net/u2y2091z/ Any ideas how …

Read More
iOS 7's blurred overlay effect using CSS?

It seems Apple's overlay is more than just a transparency. Any ideas on how to achieve this effect with CSS and possibly JS?

Read More
CSS blur on background image but not on content

I did this example. I'm trying to blur the background image, but the main content is blurred too (the <span>) How can I blur the background without blurring the content?

Read More