Elevation in dark mode: when drop shadows stop working
css
dark-mode
box-shadow
frontend
Ask your agent to implement this
Read the full writeup at https://seangeng.com/writing/dark-mode-elevation.md and implement it in my project.
It covers: Elevation in dark mode: when drop shadows stop working. A single drop shadow vanishes on a dark background. Here's the layered box-shadow system that reads as real depth in dark UIs: a top light line, an inner hairline, an edge ring, and ambient shadows that double with negative spread.
Requirements:
- Follow the technique/approach exactly as described in the writeup.
- Adapt names, colors, and styling to my project's existing conventions.
- If it's a component, make it reusable with sensible props and TypeScript types.
- Keep it accessible: semantic HTML, keyboard support, and respect prefers-reduced-motion.
- When done, tell me which files you created or changed and how to use it.
On a light background, depth is easy. Drop a soft shadow and the card lifts. In
dark mode that same shadow nearly disappears, because there's no light surface
for it to darken. You crank the opacity, it turns into a muddy black halo, and
it still doesn't look raised. Dark UIs need a different model.
Five steps, resting to floating. The depth comes from four cues working
together.
The surface
Before any ambient shadow, every elevated surface gets the same three layers:
The inset top line fakes light catching the upper edge, and honestly it's the
single biggest trick for "raised" in dark mode. The inner hairline keeps the
fill from looking flat. The outer ring is a 1px dark separator so the surface
doesn't bleed into the near-black background behind it. Together they define a
plane, even at rest with no shadow at all.
Ambient shadows that double
Elevation is then just how many ambient layers you stack on top:
Two details make this read as real light. The offset and blur double each step
(1, 3, 6, 12), because a real penumbra grows faster than linearly with height,
so doubling just feels right. And the spread goes negative (−0.5, −1.5, −3, −6),
pulling each layer inward by half its blur. Skip that and the layers pile into
one dark blob. Keep it and each stays a soft, distinct band. That's the whole
gap between a smooth shadow and a drop shadow with the opacity turned up.
Level 1 is surface-only, a resting card. Each step up adds the next ambient
layer, so level 5, a sticky or floating bar, carries all four.
Make it a token, not a one-off
Stash the surface in a custom property and append the ambient layers per level:
Now elevation is a scale you reach for by name. level={3} for a popover,
level={5} for a floating bar, instead of hand-tuning shadows on every
component and hoping they stay consistent.
Grab the component and copy any level's stack on the
Dark Elevation page.