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 #1

The Physics of Light: Virtual Sunlight & Ambient Occlusion

In digital interface design, shadows simulate a virtual physical environment governed by consistent optical rules:

  • Virtual Light Source: By universal convention in UI systems, the primary light source is positioned above and slightly in front of the screen. Light casts downwards, making positive Y-offsets standard.
  • Direct Shadow vs. Ambient Occlusion:
    1. Direct Cast Shadow: Directional shadow cast along the light angle (sharp, offset downwards).
    2. Ambient Occlusion: Soft, diffuse darkness that settles where two physical surfaces meet or sit in close proximity, independent of light angle.

Top-tier design systems layer both components together for realistic physical depth.

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