CREATE SOMETHING

Depth Without Color

On a black canvas, traditional drop shadows would disappear. Canon uses increased opacity and subtle light glows to create the illusion of elevation. Dark theme, not flat design.

Shadows

Progressive shadow scale for increasing elevation. Higher elements cast deeper shadows.

none

--shadow-none No shadow

--shadow-sm Subtle lift

--shadow-md Cards, dropdowns

--shadow-lg Modals, popovers

--shadow-xl Dialogs

2xl

--shadow-2xl Full-screen modals

Glows

Light-based elevation for dark backgrounds. Use sparingly for emphasis.

--shadow-glow-sm Subtle ambient

--shadow-glow-md Highlight

--shadow-glow-lg Feature emphasis

Inner Shadows

Inset shadows for recessed elements like input fields.

inner

--shadow-inner Input fields

inner-lg

--shadow-inner-lg Deep inset

Z-Index Scale

Predictable stacking order for layered interfaces. Never use arbitrary z-index values.

--z-tooltip 300

--z-popover 200

--z-modal 100

--z-fixed 50

--z-sticky 20

--z-dropdown 10

--z-base 0

--z-base 0 Default stacking

--z-dropdown 10 Dropdown menus

--z-sticky 20 Sticky headers

--z-fixed 50 Fixed elements

--z-modal 100 Modal dialogs

--z-popover 200 Popovers, tooltips on modals

--z-tooltip 300 Topmost tooltips

Elevation in Action

Interactive demo showing how shadows communicate elevation changes on hover.

Hover me

Shadow increases on hover, communicating lift.

Usage

elevation-usage.css
 /* Card with shadow */
.card {
  box-shadow: var(--shadow-md);
}

.card: hover {
  box-shadow: var(--shadow-lg);
}

/* Modal with overlay */
.modal-backdrop {
  z-index: var(--z-modal);
}

.modal {
  z-index: var(--z-modal);
  box-shadow: var(--shadow-xl);
}

/* Glow effect for CTAs */
.cta: hover {
  box-shadow: var(--shadow-glow-md);
}