Skip to main content

Shadows and 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

box-shadow:
0 0 2px rgba(37,42,46,.3);

Used for: dropdowns, tooltips, default cards

Level 2

box-shadow:
0 0 4px rgba(37,42,46,.3);

Used for: sticky elements, cards active

Level 3

box-shadow:
0 0 8px rgba(37,42,46,.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

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.

Z-index Use
1000 Dropdowns
1020 Sticky Elements
1030 Fixed Elements
1040 Modal Backdrops
1050 Modal Dialogs
1060 Popovers
1070 Tooltips
1080 Toasts !
Last updated September 27, 2024.