CODEWITHSUNDEEP
css
Necrone
Necrone

Reputation: 1257

Blur content behind a div using CSS3

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

Upvotes: 6

Views: 37068

Answers (3)

Marton
Marton

Reputation: 265

Best solution:

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

Also available in webkit:

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

Upvotes: 11

Dre
Dre

Reputation: 2953

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.

Upvotes: 0

Fenton
Fenton

Reputation: 251122

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.

enter image description here

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%;
}

Upvotes: 7

Related Questions