Elevation

Ready to use

Elevation utilities add box-shadow effects to create a sense of depth and visual hierarchy. They are commonly used on cards, modals, and popovers to lift elements above the surrounding content.

Tokens

Token	Value	Use case
--tng-elevation-sm	0 4px 10px 0 rgb(108 112 115 / 10%)	Subtle lift — cards, list items
--tng-elevation-md	0 15px 80px … (multi-layer)	Mid-level — dropdowns, popovers
--tng-elevation-lg	0 15px 80px … (multi-layer)	High emphasis — modals, dialogs

All medium and large shadows use multi-layer box-shadow values to create a more natural-looking depth effect. Each layer targets a different spread and opacity, mimicking how real-world shadows behave at varying distances from a light source.

Utility classes

Class	Sets
.elevation-none	box-shadow: none
.elevation-sm	box-shadow: var(--tng-elevation-sm)
.elevation-md	box-shadow: var(--tng-elevation-md)
.elevation-lg	box-shadow: var(--tng-elevation-lg)

.elevation-sm

.elevation-md

.elevation-lg

When to use

Elevation	Typical use
none	Reset elevation on a previously elevated element
sm	Cards, tiles, list items — subtle lift to separate from surface
md	Dropdowns, popovers, floating action buttons
lg	Modals, dialogs, side panels — highest emphasis

Components with built-in elevation

Several components apply elevation automatically so you don’t need to set it yourself:

Component	Default elevation
.tng-modal	var(--tng-elevation-lg)
.tng-popover	var(--tng-elevation-md)
.tng-dropdown	var(--tng-elevation-md)

Best practices

• Don’t stack shadows — avoid combining elevation utilities with custom box-shadow declarations.
• Match elevation to hierarchy — more important or more “forward” UI elements should use higher elevation. Background content should use less.
• Pair with radius — elevated elements almost always look better with rounded corners. Combine with border radius utilities.