Css blurry glass effect filters not working

Question

I am trying to do a css blurry glass effect with filters, but it's not working in the way it should. The div has no opacity at all and it's not blurry. Code(CSS):

#siteDesc
{
    text-align: center;
    background-color: #FFFFFF;
    width: 1200px;
    margin: 0 auto;
    margin-top: 30px;
    padding: 10px;
    padding-bottom: 20px;
    border-radius: 5px;
}
#siteDesc:after
{
    opacity: 0.7;
    filter: blur(1px);
    -moz-filter: blur(1px);
    -webkit-filter: blur(1px);
    -o-filter: blur(1px);
}

Edit:

Link to jsfiddle: http://jsfiddle.net/qy1sar8h/

Answer 1

Updated for relevance Sep 2021

There is a backdrop-filter CSS property that can achieve the frosted glass look.

See https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter for full details.

It is part of CSS Filter Effects Module Level 2 and the syntax for a blur filter is as follows:

backdrop-filter: blur(10px);

The background of the element will be blurred, but not the content or descendent elements.

To create a frosted glass effect, combine this property with an RGBA background colour that gives the background some transparency, e.g.:

background-colour: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);

This feature is available in all major browsers except Firefox (available behind a flag from Firefox 70) and Internet Explorer.

The technique you attempted will blur the full contents of whatever element it is applied to, and not just the background as you intended.

The only technique I know involves faking the blur with positioned background images either using a pre-blurred image or taking advantage of the filter CSS property to blur the original. I don't use this technique because it's too easy for the images to be out of alignment and your trick no longer looks good.

Answer 2

The pseudo-element won't render without a content property and, in any case will not blur the associated parent div.

Applying a filter to the pseudo-element will only blur the content of the pseudo-element.

body {
  background-color: #37E1E4;
}
#siteDesc {
  text-align: center;
  background-color: #FFFFFF;
  margin: 0 auto;
  margin-top: 30px;
  padding: 10px;
  padding-bottom: 20px;
  border-radius: 5px;
}
#siteDesc:after {
  content: 'SOME TEXT';
  opacity: 0.7;
  filter: blur(1px);
  -moz-filter: blur(1px);
  -webkit-filter: blur(1px);
  -o-filter: blur(1px);
}

<div id="siteDesc">
  <p>Hello, this is my fiddle.</p>
</div>

If you apply the blur to the div itself you get this: JSFiddle Demo

EDIT: It's not entirely clear how this is supposed to look but the only option I see for blurring the background is not to have background on div element itself but rather simulate a background with a pseudo-element.

body {
  background-color: #37E1E4;
}
#siteDesc {
  text-align: center;
  width: 90%;
  margin: 10px auto;
  margin-top: 30px;
  padding: 10px;
  padding-bottom: 20px;
  border-radius: 5px;
  position: relative;
  font-weight:bold;
}
#siteDesc:before {
  content: '';
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-filter: blur(1px);
          filter: blur(1px);
  background-color: rgba(255,255,255,0.7);
  z-index:-1;
}

<div id="siteDesc">
  <p>Hello, this is my fiddle.</p>
</div>