What is shadow anyway?

Warm up

Let’s create shadow for a rectangle as the way you used to created.

Google Material Design elevation shadow system showing different shadow levels — Google elevate shadow system. material.io

Opening

Shadow exist in every waking moment of your existent. But can you define what is shadow? What colour is shadow? Where does it come from? Does it have… weight?

Diagram illustrating what a shadow is — an area of darkness where light is blocked — scienceehs.blogspot.com

So what it is then?

Shadow is just the lack of light, it doesn’t come from anything.

In reality, light photons bounce on everything they hit, so complete darkness only happens in the completely closed environment without any open gap. In your daily life, shadows we see usually combined by many shadows or is refracted by many sources of light/bounced light from other surfaces.

Sharp, clearly defined shadow cast under direct sunlight on a flat surface — Source light in this image comes from the singularity point - the sun (I know the sun is quite big but it's far away so the light rays are parallel) so the shadow is quite sharp/clear. unsplash.com

Performer under a focused stage spotlight with deep surrounding darkness — This is probably some kind of spotlight on stage, every details In the darkness remains indiscernible, but we still can see artist's hands because light reflected from his face. wallpaperflare.com

So let’s see how it created

Let’s break the shadow down

Diagram showing how point light sources cast sharp shadows while area sources cast soft ones — How source of light affect the shadow characteristic

The image above describe exactly why the the flashlight cast very sharp shadow but not your ceiling lamp. Light travel in the shortest distant, so light comes from the source always want to travel the less distant the better, in this example - straight line it is.

But in reality, light doesn’t just come from one source, like I stated before:

…the shadow we see usually combined by many shadows or is refracted by many sources of light/bounced light from other surfaces.

Light bounces around, interact with things, it goes through transparent objects and bounce off when it meets a shiny surface.

Diagram illustrating how light reflects, refracts, and is absorbed by different materials — Light interactions. weeklysciencequiz.blogspot.com

3D scene diagram showing different types of light sources: ambient, directional, point, and spot — Light directions. researchgate.net

Light is a fascinating subject, it travel at the speed of 299.792.458m/s ~ 300.000km/h (most of the time) through 151.71 million km from the sun just to melt your ice cream.

Some cool facts:

It takes 8 minutes and 20 seconds for the light to travel from the sun to earth.
There are lots of different types of energy, but light is the only type of energy that we can actually see with our eyes.
Light energy actually travels an infinite distance and the distance it extends does not depend on the brightness of the bulb. Our eyes can only see light of certain brightness; therefore, can’t see diminished brightness giving the impression that light has stopped.

Why shadow in UI?

Light bounce off stuff, but in UI, we can not take stuff into account when creating shadow for objects. That’s just too much work and ain’t nobody got time for that™. But first, why shadow?

It creates hierarchy: Depth in UI help you in provide hierarchy of components. Help user identify which is more important than the other or what’s currently in select.

Google elevate shadow illustration. material.io
Visual interest: Eye catchy and shit.
Make UI more engaging and realistic: The design mimic the real world would feel more friendly (more logic) and more interesting for the users.

It's like I have a floating card on my desktop, how cool is that?

How to create a chef kiss shadow

Illustration comparing two objects at different heights above a surface, showing how distance increases shadow blur — Illustration of how light cast shadow on a flat surface

Rule of thumb: The further the element from the surface, the blurrier the shadow. As illustrated above, the source of light stays the same for the two example but the element from the left is closer to the surface than the other. Thus create a smaller and less blurrier shadow.

Here some tips to create a more persuasive shadow

Blur: The highest most levitating object also has a shadow with the highest blur value.
Add second light source (mimic the real world with countless light source) for realism: I think 2 or 3 is the optimal way to represent multiple light source in UI. Too much shadow will overload user system.

Illustration for the example above (not for scale)
Ambient light: Light bounce every where and when it bounce, it takes some colour with it. So make your shadow with few shades of colour around the object is the good way to go.
Be creative with layer blur: Create another layer, put in beneath and add blur effect to create a more controllable shadow

Some tips for your shadow journey

1. Your shadow must be darker than the object itself

Comparison of a card with a too-light shadow (blends in) versus one with a properly dark shadow

If the shadow is too weak, it would blend into the shape itself, so pay attention to the color of the surface to tweak its shadow accordingly.

2. Don’t overuse shadows

UI layout where every element has a heavy shadow, making the hierarchy indistinguishable

If everything is elevated, nothing is elevated.

3. Darkmode is not good for shadow → enhance it

Dark-mode UI showing a shadow that is too subtle on a dark background versus an enhanced visible one

Make is more visible so it could stand out from the background.

4. Balance between aesthetic and visibility

Windows 11 context menu (left) with a subtle elegant shadow next to Windows 10's (right) more visible but heavier drop shadow

Clearly context menu shadow of Windows 10 (right) has more visibility than 11’s one (left) but it’s the tradeoff for aesthetic. Find your point of balance and you are good to go.

5. Imagine your objects in 3D world

Architectural study showing how directional light interacts with 3D objects to form consistent shadows — Light interact with objects. behance.net

Give your design a realistic feel of directional light in real world

6. Use spread setting

UI card with a negative spread shadow value that hugs the object edges for a more refined look

Small diagram illustrating how negative spread on a shadow creates a more contained, natural effect

Negative spread setting will give your design a better touch of shadow, it feels like the lightsource is way bigger than the object. In the example above, I changed the colour of the shadow so it feels like the object is made by some transparent material.

Diagram illustrating the spread shadow technique applied to a transparent-looking object — Illustration for the example above

Minigame

Let’s create shadow according to my illustrations

Minigame prompt 2: another shape and light scenario to practice shadow placement

Minigame prompt 3: final shape with an angled light source for the shadow challenge

Info

Inspired by How Much Does a Shadow Weigh? - Vsauce