Shadows are not edges

Human eyes do weird things

Author

Zen Faulkes
May 22, 2025

A question recently landed in my inbox about alignment. If some elements in a layout use shadows but others do not, should the shadows align with the edges?

Probably not.

Two blocks of text with shadow under two title bars wthout shadows. Left: this title bar and shadow are aligned, which is fine in theory. Right: in practice, aligning sharp edges or lines looks better!

This is a case where the psychology of visual perception is may be helpful. Human eyes are very good at detecting edges of things. Even implied edges. This is a phenomenon known as “illusory contours,” or occasionally “cognitive contours.”

Usually, a shadow implies the edge of an object, rather than being seen as the edge itself.

In the Better Posters book, Figure 19.3 and 19.4 on Page 212 make a similar point. The graphs in 19.3 at the top are technically aligned: they all take up the same space, same height, same, width. But the axes exert such a strong visual pull that it looks far better to ensure the axes line up.

Another example of this principle is hung punctuation: the practice of moving opening question marks outside of the boundary box created by text. The body of the text along the left forms a stronger edge than the small quotation mark, so the letters are aligned rather than the opening quotation mark.

Now, we could debate whether it is good practice to have some elements with shadows and others without, but that is another post for another day.

P.S.—Thanks to Samir for emailing a question! You too can email me at [email protected].

Placeholder text generators (not all links current)