Skip to content

Shadow and elevation

Shadows and elevation on a surface indicate depth and direction. Together they create visual hierarchy through surface qualities that suggest their position on the z-axis relative to other surfaces.

Elevation and Shadow Hero Image
  1. Surface: any solid background element that can be stacked or attached to each other, but can not pass through. They can be transparent, cast shadows, and reflect light.
  2. Elevation: the distance between surfaces.

Product use cases

  • Tooltips
  • Modals
  • Cards
  • Sticky Navigation
  • Floating Bars (e.g. Credit Cards Compare Bar)

Usage

These are low level foundation styles that must be used consistently throughout the product.

  • Assign a shadow 0-3 to all surfaces

Shadows

Hierarchy
Box-Shadow
0None
10 4px 8px 0 rgba(100,102,106,0.1), 0 1px 4px 0 rgba(100,102,106,0.36);
20 4px 8px 0 rgba(100,102,106,0.15), 0 8px 16px 0 rgba(100,102,106,0.33);
30 32px 40px 0 rgba(100,102,106,0.33), 0 8px 16px 0 rgba(100,102,106,0.15);

Design Guidelines

Create visual hierarchy with shadows

Shadows help create a visual hierarchy between overlapping surfaces.

DOUse shadows available in the foundation for overlapping surfaces.
DON'TGo completely flat.

Use elevation to create the right sense of depth

DOCreate a sense of depth by increasing the shadows as the surface elevation increases.
DON'TForget about elevation. Surfaces without elevation fail to create a separation from background elements.