This article is not maintained any longer and likely not up to date. DuckDuckGo might help you find an alternative.

CSS blur test

TL;DR: To evaluate the hierarchies on your website, use the filter: blur(5px) style on your <body> element.

Why hierarchies matter

Not everything is equally important on your website: Every single page should have one single goal (signing up for a newsletter, click the buying button, display the one information everyone looks for). Also, some elements belong together to give the reader orientation (image and label, intro and list). Whitespace at the right amount and place is what gives orientation, and structure.

How to test hierarchies

To test your hierarchies, it helps to get a bird's eye view over your website. The best way to test your hierarchies is the blur test. By blurring out the specific content, you will quickly recognize borders, space and sizing.

How to apply blur effect in CSS

The quickest way to do the blur test is by using the blur CSS filter. You can either create an own class and apply it when testing:

<style>
.blurtest {
    filter: blur(5px);
}
</style>
<body class="blurtest">
</body>

Or you simply create an on-the-fly class using Chrome's DevTools or Firefox' Inspector:

Did this help you? 👍 👎