Shadow Weight
the heaviness or lightness of shadows
— how depth, opacity, and spread
create visual mass
Shadow weight is the gravity of elevation.
Where shadow softness describes how gentle a shadow feels,
shadow weight describes how heavy it feels.
A heavy shadow feels deep, assertive, structural.
A light shadow feels subtle, calm, atmospheric.
Shadow weight is the interface’s vertical mass
— how much an element seems to rise above the page.
What heavy shadows express
Heavy shadows feel:
anchored — strong grounding
assertive — high presence
primary — elevated importance
engineered — technical, deliberate
dimensional — clear separation from the background
Heavy shadows are used for
modals, floating panels,
and components that must feel dominant.
What light shadows express
Light shadows feel:
calm — low visual pressure
airy — gentle elevation
secondary — supportive, not dominant
natural — closer to real light behavior
quiet — depth without noise
Light shadows are used for
cards, surfaces, and subtle layering.
How shadow weight is created
Shadow weight emerges from:
Opacity — higher opacity = heavier
Blur radius — tighter blur = heavier; wider blur = lighter
Spread — larger spread increases mass
Color value — darker shadows feel heavier
Layering — multiple stacked shadows increase weight
Elevation distance — higher elevation feels heavier
Shadow weight is the mass of depth,
not just the presence of it.
Elevation weight — how high the element appears
Opacity weight — how dark the shadow is
Blur weight — how tight or diffuse the edge is
Layered shadow weight — multiple passes vs. a single shadow
Each form shapes how heavy the elevation feels.
What shadow weight avoids
To maintain clarity, shadow weight avoids:
heavy shadows on secondary elements
deep shadows paired with soft, gentle surfaces
inconsistent elevation across similar components
pure black shadows that feel artificial
high‑contrast shadows that overpower content
Shadow weight must be intentional — not accidental.
How we describe shadow weight when working with AI
Examples of what to say:
“Increase shadow weight for stronger elevation.”
“Lighten the shadow by reducing opacity.”
“Use a heavier shadow for primary surfaces.”
“Reduce shadow weight to keep the tone calm.”
“Maintain consistent shadow weight across components.”
These phrases guide depth without micromanaging CSS.
Why shadow weight matters
Shadow weight shapes:
Hierarchy — heavy shadows feel primary
Tone — heavy = assertive; light = calm
Contrast — weight amplifies difference
Softness — soft shadows reduce perceived mass
Expression — personality through depth
Comfort — balanced elevation reduces visual fatigue
Shadow weight is the vertical physics of design.
Tony de Araujo —New York | Lisbon