Design detail: Crafting better shadows for interaction

Shadow doesn’t get as much love as other design elements, such as cool colour palettes or super sexy shapes, but it is vital in communicating interaction.

Plato gave shadows a bad name. Alright, look, I may be stretching this a little, but bear with me. In the Allegory of the Cave, Plato contended shadows mislead people about the true nature of reality, setting up a distrust of darkness and shadows. Light is genuine knowledge and shadow is the opposite, with this distrust persisting throughout the centuries.

We see shadow as something superficial, mere decoration, an attempt to mimic reality, mislead our users and spoil an otherwise polished interface. Art historian Victor I. Stoichita posits that shadows rarely feature in Renaissance art, because shadows are dark and considered too ugly to include in painting. But we know in our ‘enlightened’ interactive age that shadow is a visual tool in the same realm as colour, shape and line.

Elevation

The importance of shadow is in its ability to communicate visual cues in layered and highly interactive interfaces. Using subtle and refined shadowing, even in minimalist design, lends better depth perception without ruining the designer’s aesthetic principles. Shadow helps tell a story about how things behave on screen.

Shadow does one thing brilliantly, and that is conveying elevation, especially in complex apps, creating depth on the page, and showing the hierarchy of layered elements. Surfaces at higher elevations have larger shadows, while those at lower elevations have smaller shadows.

Think about if you had a flat design, with no shadow. How easy is it to distinguish which element had a higher priority, especially when under pressure to complete a task? Not easy.

A shadow has two parts

We create shadows with little thought, mindlessly use the default shadow styles in our design tools; an enormous mass of blurred darkness, a phantom that hovers ominously below the element we’ve created. We like to think that we pay utmost attention to detail, so why not give our attention to this small shadow element?

Ominous looking 😨

Let us ignore the countless interesting debates about whether shadows are a physical phenomenon or caused psychologically (although I’m itching to write a paragraph on it) and look at a practical case.

A real world shadow has two main distinctive parts. Directional light casts the first shadow and ambient light casts the second. This physical phenomenon becomes really apparent when you observe objects around you, especially on bright days as the sun is beaming down.

Shadow cast by directional light

For our first shadow, we want to emphasise the elevation in our UI element, and a strong directional light is the source we need to create this effect. I use a directional light shadow that has more offset than the ambient light shadow, as it is comes in from a single angle.

This shadow will also be more defined and darker than an ambient light shadow.

Shadow cast by directional light

Shadow cast by ambient light

A shadow cast by ambient light is more diffuse, softer and has less vertical offset than that cast by directional light as it comes from all angles.

One thing to keep in mind is that the higher the elevation of an element, the fainter the ambient shadow. It starts of dark, (at small elevations, it can appear darker than that cast by directional light) and than becomes faint until it disappears.

Shadow cast by ambient light

Combined shadow

When we combine these two shadows, we get a more refined and pleasing effect. You do not need to rely on a border to give extra contrast, as the ambient light shadow can give the contrast you need.

Shadows combined

That’s all there is to it. You can see that giving small visual details a little love can improve an overall design. If Plato was looking over our shoulder as we were crafting our newly minted shadows, I think he would approve of their refined appearance, and would exclaim, ‘better a little which is well done, than a great deal imperfectly.’

In code

For those of us who code, CSS is a good way of showing how to create a shadow.

Shadow for a low elevation

box-shadow:  
    0 2px 3px hsla(0, 0%, 0%, 0.12) /* Ambient light shadow */,
    0 3px 6px hsla(0, 0%, 0%, 0.14) /* Direct light shadow */;

Shadow for a higher elevation

box-shadow:  
    0 4px 12px hsla(0, 0%, 0%, 0.12) /* Ambient light shadow */,
    0 14px 24px hsla(0, 0%, 0%, 0.16) /* Direct light shadow */;

Shadow for a highest elevation (faint ambient light shadow)

box-shadow:  
    0 5px 12px hsla(0, 0%, 0%, 0.4) /* Ambient light shadow */,
    0 18px 32px hsla(0, 0%, 0%, 0.16) /* Direct light shadow */;

References

Victor I. Stoichita, A short history of the shadow, 2013

Plato, Allegory of the cave

Michael McGinnis, The color of shadows