Shadows & Depth

Shadows are used to focus the user’s attention and define spatial relationships.

Shadows provide cues about depth, direction of movement, and surface edges. A surface’s shadow is determined by its elevation and relationship to other surfaces.

Because shadows express the degree of elevation between surfaces, they must be used consistently throughout your product. Objects with deeper shadows must be positioned above objects with smaller shadows in the z-index.

Trimble uses three levels of elevation specified by different depths of drop shadows:

Level 1

0 0 2px rgba(36,35,45,.3);

Used for: dropdowns, tooltips, default cards

Level 2

0 0 4px rgba(36,35,45,.3);

Used for: sticky elements, cards active

Level 3

0 0 8px rgba(36,35,45,.3);

Used for: dialogs, modals, cards hover

Never use drop shadows on text, buttons, chips, sliders, or any other elements that do not include shadows in their guidelines.

Standard drop shadow color is gray. Always adjust color opacity to retain a maximum contrast ratio of 1.5:1. Avoid dark shadows.


Z-index is a CSS property that specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

1020Sticky Elements
1030Fixed Elements
1040Modal Backdrops
1050Modal Dialogs