Home
Bookmarks
Leagues
LEARN
Courses
Career Paths
Assessments
Tutorials
Arcade
Glossary
GROW
Certifications
Log in
Glossary
Log inSign up
Courses/UX Design Foundations/Intro to Shadows/
Exercise #5

Shadows in Dark Mode: Tonal Elevation vs. Opacity

Against a dark charcoal or black canvas, dark drop shadows become invisible. Applying black shadows to dark mode surfaces provides zero perceived elevation.

Dark Mode Elevation Rules

  1. Lighten Surface Tones: The higher an element's elevation, the closer it is to the virtual light source. Therefore, higher elevation surfaces must use progressively lighter shades of gray or charcoal.
  2. Subtle 1px Border Highlights: Add a delicate 1px border stroke (rgba(255, 255, 255, 0.08)) around elevated dark cards to define physical edges.
  3. Deep Ambient Shadows: When dark cards overlap other dark cards, use subtle black ambient occlusion with a larger spread to prevent visual blending.

Topics

The Physics of Light: Virtual Sunlight & Ambient Occlusion
Deconstructing CSS Box-Shadow Properties
Layered Shadows: Avoiding the Muddy Black Anti-Pattern
Elevation Hierarchy and Design System Tokens
Shadows in Dark Mode: Tonal Elevation vs. Opacity
Cognitive Affordance: Communicating Interactivity and Drag States
design
UX Design

From lesson

11

Intro to Shadows

Level 3 · Elements of Design II

Top contributors

Community contribution details will appear here once real learner activity is available.

Share