CODEWITHSUNDEEP
htmlcssblur
user3614311
user3614311

Reputation: 11

How to blur a div (box)

How can I apply a Gaussian blur using CSS to a DIV which contains text. Basically, what I want to achieve is to have the box with a gaussian blur but the text in a normal way. Can this be done? I don't know how, I've been trying but I just can't.

Example: Like I have my div at opacity: 0.75 I would like my div to be transparent but with gaussian blur, since in the background I have a moving image, so I want the box to be blurred.

Upvotes: 1

Views: 9041

Answers (2)

MMachinegun
MMachinegun

Reputation: 3074

Well I don't think you can achieve what you are looking for without some extra div or even better a pseudo-element. My suggestion would be:

div {
  position:relative;
  width: 10em;
  height: 20em;
  padding: 1em;
}
div::before {
  content: '';
  position:absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  background: url(http://upload.wikimedia.org/wikipedia/en/6/6c/Some_Girls.png);
  z-index: -1;
}

Your question is not too clear though so I am not sure if this is what you are looking for... Pen: http://codepen.io/marczking/pen/dqxwG

Upvotes: 0

Artem Petrosian
Artem Petrosian

Reputation: 2954

Apply following CSS to your block:

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

However, this property works only in modern browsers: compatibility table

Upvotes: 2

Related Questions