Table of Contents
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.
Forms of shadow weight
- 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