Blur content behind a div using CSS3

Question

I've encountered a problem with applying blur to the background of absolute/fixed elements, as it does not seem to blur the main content of the page, only the content of the absolute element itself. I currently have the styling for my alert as following:

.alert-wrap {
    position: fixed;
    z-index: 10;
    right: 0;
    bottom: 0;
}

.alert-wrap .alert {
    display: block;
    background-color: rgba(215, 44, 44, 0.5);
    margin: 0 15px 15px 0;
    position: relative;
}

.alert-wrap .alert:before {
    content: "";

    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

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

}

I'm looking to have this blur the background of the alert element, making the main content behind it seem blurred (applying more focus on the element itself), but have not managed to find anything even confirming this issue exists at all.

HTML document flow is as follows:

<html>
    <head>
        <!-- Header Stuff Deleted -->
    </head>

    <body>
        <div class='alert-wrap'>
            <div class='alert'>
                <div class='head'>
                    Notifications
                </div>
                <div class='body'>
                    Alert content here
                </div>
            </div>
        </div>

        <?php
            //constructing navbar
        ?>

        <div class='content'>
            Some content here
        </div>

        <?php
            //constructing footer
        ?>
    </body>
</html>

Image example:

example

You have a problem, because you don't have any background applied to the blurred element, so there is nothing to blur. — max, Oct 21 '15 at 19:34
@makshh As I said in the OP, I'm looking to blur the background of the absolute element to make the content behind the semi transparent background blurry, not the any sort of background of the element itself. — Necrone, Oct 21 '15 at 19:38
You mean something like this? http://codepen.io/anon/pen/JYMQBW — max, Oct 21 '15 at 19:45
@makshh I'm probably not doing a great job of explaining this, I'll add some images — Necrone, Oct 21 '15 at 19:58
@makshh Image example: [img](http://i.imgur.com/rJIb4BM.png) — Necrone, Oct 21 '15 at 20:04
I see, I think it will be hard to reproduce this, because you would have to blur the exact part of the image/content beneath the alert. — max, Oct 21 '15 at 20:09
http://stackoverflow.com/questions/22388840/can-you-blur-the-content-beneath-behind-a-div — max, Oct 21 '15 at 20:16

score 11 · Answer 1 · answered Nov 29 '19 at 06:38

11

Best solution:

backdrop-filter: saturate(180%) blur(20px);

Also available in webkit:

-webkit-backdrop-filter: saturate(180%) blur(20px);

answered Nov 29 '19 at 06:38

Marton

247
2
11

Fenton · Answer 2 · 2015-10-21T19:45:55.167

6

I have updated this for your comment about blurring the content... this is better handled like this.

This will blur the background and all content, but not the alert.

HTML:

<div id="alert">
    Lorum Ipsum Delorum Alert!
</div>

<div class="content" id="example">
    Blah Blah Blah Blah Blah Blah Blah Blah Blah 

    <div onclick="document.getElementById('example').className='alerting';document.getElementById('alert').style.display='block';">Go</div>
</div>

CSS

.content {

}

.alerting {
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
}

#alert {
    display: none;
    width: 300px;
    height: 100px;
    position: fixed;
    top: 100px;
    left: 0;
    text-align: center;
    width: 100%;
}

edited Oct 21 '15 at 19:45

answered Oct 21 '15 at 19:40

Fenton

241,084
71
387
401

I'm actually looking to blur content that is below my alert to place more focus on the alert itself, I've seen this solution a few times while searching, thank you anyways. – Necrone Oct 21 '15 at 19:42
I have updated to blur all content except the alert. – Fenton Oct 21 '15 at 19:46
Not exactly, I'll add some images to the OP to make it more clear hopefully – Necrone Oct 21 '15 at 19:59
It is technically possible, but economically impossible :) You would need to create a clone of the content, sized to fit exactly behind the alert in an element with overflow hidden... and scrolled to the appropriate position. Then you could blur that clone hosting element. That would be quite a lot of work. – Fenton Oct 21 '15 at 20:06
Fair enough, looks like I'll have to find something else. Thanks for the answer. – Necrone Oct 21 '15 at 20:10

score 0 · Answer 3 · edited May 23 '17 at 12:13

0

This sounds like a duplicate of this question. The CSS blur filter applies to the element itself; however background-filter was recently introduced in the webkit nightly. For a fallback that works in current browsers -- albeit using canvas -- check this answer.

edited May 23 '17 at 12:13

Community

1
1

answered Oct 21 '15 at 21:14

Dre

2,933
2
18
21

*backdrop-filter – vikrant Sep 10 '20 at 04:41

Blur content behind a div using CSS3

3 Answers3