Darken Background of a Website (Gray Out Effect)

In this tutorial, I will show you how to gray out a complete website, what is also known as "Grey Out Effect". This effect can be used, for example, to display images or anything else in the foreground while the entire background is darken.

In the following we would like to discover which CSS and which HTML is necessary for this effect, how to adapt the CSS and HTML to your needs and how you can dynamically switch on and off the effect using JavaScript and jQuery.

The CSS

We are using the following CSS for all modern browsers:

#grayout {
   position: fixed;
   left: 0px;
   top: 0px;
   height: 100%;
   width: 100%;
   background-color: black;
   opacity: 0.5;
   z-index: 9999;
}

If we want this running also in old versions of Internet Explorer, for example, in version 6, we still need to add the following CSS rules:

#grayout {
   filter: alpha(opacity=50);
}
 
* html #grayout {
   position: absolute;
}

In newer versions of the Internet Explorer as well as in the Edge browser, also the CSS code above works, while "filter" is required for older versions. If you want to validate your CSS, however, you have to remember, that "filter" is not part of the CSS standard.

How dark should the background be?

How dark the background will be, can be adjusted at "opacity: 0.5" respectively "alpha(opactiy=50). These numbers can be customized from 0 (invisible) to 1 (fully visible) or from 0 to 100 in the way you want it.

The HTML

Finally, we still need the HTML. We only need the following line:

<div id="grayout" style="display: none;"></div>

It does not matter at which point you insert the line in your HTML document. You can also add the line later using jQuery. The "display: none" ensures, that the grayed-out area is not yet visible at the beginning. If you want to show the area immediately, of course, you can simply omit "display: none".

Gray out background dynamically

When we are using jQuery, we can gray out the background dynamically and can also show it again. For this, we use the following link:

<a href="#" onclick="$('#grayout').toggle(900); return false;">GrayOut</a>

If you click on this link "GrayOut", the darkened background of the page is displayed or hidden, depending on whether it is currently visible or not.

Show elements in the foreground

Finally, the question arises how we can show individual elements (such as a div container) in the foreground, that means in front of the grayed background.

For that, the CSS property "z-index" is important. We create the grayed background by placing a semi-transparent div container that is as large as our site (width and height are both 100 %), over all other elements on our site by setting the "z-index" of this box higher than that of all other elements (see the section about the CSS).

If we now want to let appear an element in front of this semi-transparent div box, we only have to ensure that this box is assigned an even higher z-index than the z-index of the background via CSS. For the background, we use a z-index of 9999 in the example, so we could give the element a z-index of 10000 to achieve that.