Full Page Blur in CSS

Question

How can I blur a whole page using CSS? Other elements such as images are allowed.

I am not sure for all browsers (using text-shadow like [tharkun suggests](http://stackoverflow.com/questions/371209#371226) is a possible workaround). But you are not the only one asking for it, and you can add your vote to this [request for adding blur effect to CSS](http://www.openajax.org/runtime/wiki/Blur_Effect). — VonC, Dec 16 '08 at 13:03

score 39 · Answer 1 · edited May 02 '17 at 16:32

This is working in Firefox and WebKit using the filter: blur(radius). See Can I Use: CSS filters for which browsers can support this.

.blurredElement {

     /* Any browser which supports CSS3 */
    filter: blur(1px);

    /* Firefox version 34 and earlier */
    filter: url("blur.svg#gaussian_blur");

    /* Webkit in Chrome 52, Safari 9, Opera 39, and earlier */
    -webkit-filter: blur(1px);
}

The blur.svg for Firefox 34 or below looks like this:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <filter id="gaussian_blur">
            <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
        </filter>
    </defs>
</svg>

You can adjust the radius, but lower values mean better performance.

score 17 · Answer 2 · answered Oct 26 '12 at 22:38

17

You can use the filter property with blur, although it's not widely supported: http://jsfiddle.net/GkXdM/1/. It's supported on Chrome, but it comes with a big performance penalty when used on the whole page.

body {
    filter: blur(2px);
}

answered Oct 26 '12 at 22:38

pimvdb

151,816
78
307
352

2

simplest way to blur any container. Great! – Ck Maurya Nov 05 '15 at 05:42

score 12 · Answer 3 · answered Dec 16 '08 at 13:12

12

I am not sure if this is what you mean, but an often seen blur-like effect is created by creating a full height, full width DIV-element with a background-color and opacity property set.

/* DIV-element with black background and 50% opacity set */
div.overlay {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
    filter: alpha(opacity = 50); /* required for opacity to work in IE */
}

Since your page height can vary, you'd probably want to use Javascript to set the height for this element.

answered Dec 16 '08 at 13:12

Aron Rotteveel

81,193
17
104
128

Couldn't I just do height: 100%; ? – Dec 17 '08 at 01:11
No. There is no working cross-browser rule that defines 100% height, sadly. – Aron Rotteveel Dec 29 '08 at 13:32
5

if you want to use this anwser, change position to fixed, and you can set height to 100% – BigName Jan 02 '10 at 13:14
But if the position is fixed, and the user resizes the browser window (makes it larger) - won't that make the overlay _not_ 100% in height or width? – Arrow Jun 26 '12 at 05:14
1

I think you'd need to capture the .resize() in jQuery and reset the width and height of the overlay just incase the user changed the size of the window. – Arrow Jun 26 '12 at 05:16
7

Whats wrong with this? : {position:absolute;left:0;right:0;top:0;bottom:0;} – Louis Somers Sep 20 '12 at 14:02
1

Using position: absolute will result in a scrollable overlay if the page is larger than the browser window (hence showing its edge). By using fixed the overlay will not move when scrolling. @Arrow: 100 % width and height will always be 100 % even if browser window get resized (this is the nature of css). – einord Jun 20 '13 at 14:53

score 10 · Answer 4 · edited May 21 '16 at 14:42

~~Real life demo here: http://premium.wpmudev.org/project/e-commerce/ (click on the video).~~

They add the class thickbox-open to the body, when thickbox is open, and from there target and style a whole-content (except overlay and popup) containing element like so:

.thickbox-open #main-container {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -ms-filter: blur(2px);
  -o-filter: blur(2px);
  filter: blur(2px); 
}

Okay so no, still not fully usable (http://caniuse.com/css-filters), but we’re getting there.

Apply to a containing element as above rather than body since a blur filter cannot be negated by child elements.

score 4 · Answer 5 · answered Nov 01 '11 at 13:33

This is possible in Firefox only at this time. Here are the steps (see example here).

You need the XHTML doc type (since we're using XML SVG markup).

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">

Insert the SVG element where the blur should appear.

<div class="blurDiv"></div>
<svg:svg>
    <!-- Filter -->
    <svg:filter id="blurLayer">
         <!-- Blur and attributes -->
         <svg:feGaussianBlur stdDeviation="0.9"/>
    </svg:filter>
</svg:svg>

Include inline style (not from external css file).

<style type="text/css">
    div.blurDiv { filter:url(#blurLayer); }
</style>

This gives you a true blur (like zoom out effect), not the standard transparent glass look you find everywhere else.

score 4 · Answer 6 · answered Jan 27 '12 at 23:09

Here is a quick and dirty solution, take it and use if want, tested on Firefox & chrome, but should work across compliant browsers

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Blur</title>
<style type="text/css">
#f0,#f1,#f2{position:absolute;left:0px;top:0px;height:95%}
#f0{filter:alpha(opacity=50);opacity: 0.15;-moz-opacity:0.15;z-index:15}
#f1{filter:alpha(opacity=25);opacity: 0.25;-moz-opacity:0.25;z-index:2}
#f2{filter:alpha(opacity=75);opacity: 0.75;-moz-opacity:0.75;}
.fin{margin-right:auto;margin-left:auto}
body{display:none}
</style>
<script type="text/javascript">
var winX=window.innerWidth-20;
var winY=screen.availHeight-10;
var count=0;
var maxCount=50;
var goBlur=true;

function ele(id) {
    return document.getElementById(id);
}
function runBlur() {
    if(goBlur) {
        for(var i=0; i<2; i++) {
            var x = Math.random()<0.5?-1:1;
            var y = Math.random()<0.5?1:-1;
            if(ele("f"+i).offsetLeft >3)
                x=-1;
            else if(ele("f"+i).offsetLeft<-3)
                x=1;
            if(ele("f"+i).offsetLeft >3)
                y=-1;
            else if(ele("f"+i).offsetLeft<-3)
                y=1;

            ele("f"+i).style.left = (ele("f"+i).offsetLeft + x)+"px";
            ele("f"+i).style.top = (ele("f"+i).offsetTop + x)+"px";
        }
    }
    count++
    if(count>maxCount) {
        count=0;
        if(goBlur)
            goBlur=false;
        else
            goBlur=true;
        for(var i=0; i<3; i++) {
            ele("f"+i).style.left = "0px";
            ele("f"+i).style.top = "0px";
        }
    }
    setTimeout("runBlur()",200);
}

function pageLoaded() {
    var content = document.body.innerHTML;
    var rewriteBody="";
    for(var i=0; i<3; i++) {
        rewriteBody+='<div id="f'+i+'"><div class="fin">'+content+'</div></div>';
    }
    document.body.innerHTML=rewriteBody;
    setTimeout("setUp()",200);
}
function setUp() {

    for(var i=0; i<3; i++) {
        ele("f"+i).style.width=winX+"px";
    }

    document.body.style.display="block";
    runBlur();
}
</script>
    </head>
    <body onload="pageLoaded()">
<h1 style="color:#900">Page blur example</h1>
You can put any page content and html you want here.
    </body>
</html>

+1 Not pretty, but I don't it deserves the down-votes without comment. — J.Hendrix, Jun 08 '12 at 01:40
This works in IE, Firefox, Chrome & Safari. I agree it's not pretty and it might have issues in the future as it will cause invalid markup if you use any id's on your page. But +1 for outside of the box thinking. — Ben, Mar 25 '13 at 21:26

score 0 · Answer 7 · answered Dec 16 '08 at 12:59

Whatever you are trying to do, if it's not just for fun, don't do it :)

I think you'd have to loop all elements trough the blur filter which only works with IE and not with firefox.

Here's an ugly solution to achieve an IMO ugly blur in FF: http://kilianvalkhof.com/2008/css-xhtml/cross-browser-text-shadow/

score -1 · Answer 8 · answered Oct 12 '11 at 01:07

On the height 100% question, there is no CSS solution, even in CSS3, but there is a JQuery way of doing it. If the element is #modal, define all other properties in the CSS file and do not even mention the height property in the CSS. Then put the following JQuery code in your HTML as follows:

<script type="text/javascript">
$(function(){
    $('.modal') .css({'height': (($(window).height()))});
});
$(window).resize(function(){
    $('.modal') .css({'height': (($(window).height()))});
});
</script>

This requires JQuery of course, and may cause issues if the content is taller than the viewport. As to the ability to blur the contents behind it dynamically, that's something I'd love to know.

Edit for the future. There is now a way of doing this incredibly easily: the vh and vw units. vh is viewport height, vw is viewport width. so setting the modal to full height and full width would be .modal {width:100vw;height:100vh;}. — Mike Burroughs, Mar 02 '17 at 04:24

Full Page Blur in CSS

8 Answers8

Linked