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
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:
Or you simply create an on-the-fly class using Chrome's DevTools or Firefox' Inspector: