How to blur the div below the section with CSS 3 without background image?

Question

How to blur the div below the section thus applying that effect to the section and its content( would like to get OSX Yosemite blur effect without background image ).

Here is the markup.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">

        section{
            display: table;
            position: relative;
            background: rgba(255,0,0,0.5);
            width: 300px;
            height: 100px;
        }

        section h1{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            color: #fff;
        }

        div{
            position: absolute;
            top: 30px;
            left: 10px;
            width: 300px;
            height: 100px;
            background: rgba(255,255,255,0.5);
            filter: blur(4px);
        }


    </style>
</head>
<body>


    <section>
        <h1>There is some content</h1>
    </section>

    <div></div>


</body>
</html>

possible duplicate of [How to use CSS (and JavaScript?) to create a blurred, "frosted" background?](http://stackoverflow.com/questions/17092299/how-to-use-css-and-javascript-to-create-a-blurred-frosted-background) — EternalHour, Mar 08 '15 at 21:44

score 0 · Accepted Answer · answered Mar 08 '15 at 22:18

I see that you've got filter: blur. I did some testing with that as well but couldn't get it to work at all in firefox 31. Seems that text-shadow should accomplish something similar.

JSFiddle

.blurred {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

How to blur the div below the section with CSS 3 without background image?

1 Answers1