Shadows

Shadows are used to improve the overall general feel of things, and add levels of depth and realism to the user’s visual experience.

It should give clear distinction when stacking containers on top of each other.

Behavior

  • We recommend you use Elevation 1 and 2 for smaller divs and containers.
  • Elevation 3 and 4 are larger drop shadows used for large containers such as the left and right pane or modals.

See the application layout page to learn more about containers.

Elevation Levels

Elevation 1

background: #ffffff;
border: 1px solid #dddde2;
box-sizing: border-box;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 3px;

Elevation 2

background: #ffffff;
border: 1px solid #dddde2;
box-sizing: border-box;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.12);
border-radius: 3px;

Elevation 3

background: #ffffff;
border: 1px solid #dddde2;
box-sizing: border-box;
box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.12);
border-radius: 3px;

Elevation 4

background: #ffffff;
border: 1px solid #dddde2;
box-sizing: border-box;
box-shadow: 0px 8px 14px rgba(0, 0, 0, 0.22);
border-radius: 3px;
Contents
Resources