Almost every fake-looking graphic I see has the same tell, and it is not the colors or the typeface. It is the shadow: a gray copy of the shape, offset down and to the right, blurred by a fixed amount, at fifty per cent black.
That default has been the default for about thirty years and it describes light that does not exist anywhere. Once you know what real shadows do, you cannot unsee it, and fixing it takes about a minute per element.
What a shadow actually is
A shadow is not a dark shape lying on a surface. It is a part of the surface receiving less light. That distinction sounds pedantic and it explains every rule that follows.
If a shadow is a surface with less light on it, then it is the color of the surface, darkened. On a warm wooden table the shadow is dark brown. On a blue wall it is dark blue. Almost never gray, and never pure black, because ambient light bouncing around the room fills it in.
So: pick your shadow color by sampling the surface and darkening it. Or, faster, tint it slightly toward the complement of the light source. Warm light, cool shadow. That one change does more for realism than any amount of blur adjustment.
The three rules of a believable shadow
1. It gets softer with distance
Where an object touches its surface, the shadow is sharp and dark. As the gap grows, the shadow spreads and fades. This is why a cup sitting on a table has a crisp dark line under its rim and a soft gray pool further out.
A single drop shadow with one blur value cannot express this. Two shadows can: a tight dark one for the contact, and a wide soft one for the ambient occlusion. Stack those and flat objects suddenly sit on the page.
This is the single biggest upgrade available. Most interface shadows that look expensive are two or three shadows at different sizes and opacities, not one.
2. It follows one light
Every shadow in a composition should agree about where the light is. If the card’s shadow falls to the bottom right, the button on it must too, and so must the product photograph you dropped in.
Mismatched shadow directions are the most common reason a composite feels wrong to people who cannot say why. When you drop a cut-out onto a background, check the direction of the existing shadows in that background first, then match yours to them.
Straight down, or down and very slightly to one side, is the safe default for interfaces, because it reads as light from above, which is where light usually is.
3. Bigger distance means bigger and lighter
An object close to its surface has a small, dark, tight shadow. An object floating high above has a large, soft, faint one. Distance and darkness move in opposite directions.
Get this backwards, which the default settings do, and elements look like stickers hovering at an impossible height while casting a shadow that belongs to something resting on the ground.
Numbers that work
For a card or panel lifted slightly off a page, something like this:
- A contact shadow: offset 1 or 2 pixels down, blur 3 or 4, around 12 per cent opacity.
- An ambient shadow: offset 8 to 12 down, blur 24 to 40, around 8 per cent opacity.
- Both tinted toward the background color rather than pure black.
Those opacities look far too low written down and are usually right on screen. If your shadow is visible as a shadow, it is probably too strong. It should read as depth rather than as an effect.
For something meant to feel heavy and close to the surface, tighten and darken. For something floating, spread and lighten. Those two dials cover almost every case.
Inner shadow, glow and the ones people misuse
Inner shadow makes a shape look recessed rather than raised, like a pressed button or an inset field. Same rules apply about direction, and the same tendency to be set far too strong.
Outer glow is a shadow with no direction, spreading equally in all directions. Physically that means the object is emitting light, so use it for things that glow: neon, screens, buttons in a dark interface. Using it as a general-purpose lift is the fastest way to make something look like a mid-2000s web graphic.
Bevel simulates a rounded or chamfered edge catching the light. Extremely powerful for making something look physically manufactured, and extremely easy to overdo. If you can see it clearly from across the room, take it down by half.
All of these stack, and the good results almost always come from several subtle effects rather than one strong one.
The check
Turn every shadow off and look at the design flat. Then turn them on. Did anything get clearer, or did it just get busier?
Shadows exist to communicate hierarchy: this thing is above that thing, this element is interactive, this panel is closer to you. If a shadow is not saying one of those things, it is decoration, and decoration that mimics physics is the kind that ages worst.
My honest advice: fewer shadows, more carefully made. One element with a properly stacked two-part shadow beats six elements each carrying the default, and it takes less time than you would think once you have set it up once and saved the styles.
