Dark Elevation

new

A dark-mode elevation scale — five layered box-shadow tokens with a top light line, inner hairline, edge ring, and doubling ambient shadows. From resting card to floating bar.

DM-ELEVATION-5

Floating · Sticky / floating bar

level5

inset 0 1px 0 0 rgba(255,255,255,0.08)inset 0 0 0 1px rgba(255,255,255,0.04)0 0 0 1px rgba(0,0,0,0.16)0 1px 1px -0.5px rgba(0,0,0,0.18)0 3px 3px -1.5px rgba(0,0,0,0.18)0 6px 6px -3px rgba(0,0,0,0.18)0 12px 12px -6px rgba(0,0,0,0.18)

The scale

Resting

Raised

Overlay

Modal

Floating

Usage

example.tsx

import { Elevation } from "~/components/elevation/elevation";

<Elevation level={3} className="p-6">
  <Dropdown />
</Elevation>

How the depth works

In dark mode a single drop shadow barely shows — there's no white background for it to darken. So depth comes from three surface cues plus stacked ambient shadows.

Every level shares a surface treatment: an inset top light line (as if lit from above), an inset hairline to define the inner edge, and a 0 0 0 1px dark ring to separate it from the background. Then each step adds one more ambient shadow whose offset and blur double (1 → 3 → 6 → 12) while a negative spread (−0.5 → −1.5 → −3 → −6) pulls each layer in, so the penumbra stays soft instead of muddy. More layers reads as floating further off the page.

elevation.css

/* Shared surface: top light line + inner hairline + outer ring */
.dm-elev {
  --dm-surface:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(0, 0, 0, 0.16);
  border-radius: 22px;
  background: #232327;
}

/* Each level appends one more ambient layer — offset & blur double,
   negative spread keeps it tight. */
.dm-elev-1 { box-shadow: var(--dm-surface); }
.dm-elev-2 { box-shadow: var(--dm-surface),
  0 1px 1px -0.5px rgba(0,0,0,.18); }
.dm-elev-3 { box-shadow: var(--dm-surface),
  0 1px 1px -0.5px rgba(0,0,0,.18), 0 3px 3px -1.5px rgba(0,0,0,.18); }
.dm-elev-4 { box-shadow: var(--dm-surface),
  0 1px 1px -0.5px rgba(0,0,0,.18), 0 3px 3px -1.5px rgba(0,0,0,.18),
  0 6px 6px -3px rgba(0,0,0,.18); }
.dm-elev-5 { box-shadow: var(--dm-surface),
  0 1px 1px -0.5px rgba(0,0,0,.18), 0 3px 3px -1.5px rgba(0,0,0,.18),
  0 6px 6px -3px rgba(0,0,0,.18), 0 12px 12px -6px rgba(0,0,0,.18); }

Props

prop	type	default	description
level	1 \| 2 \| 3 \| 4 \| 5	1	Elevation step, resting → floating.
children	ReactNode	—	Surface contents.
…props	HTMLAttributes	—	Any native div prop (className, style, …).