A card with a heavy gray blob sitting under it doesn't look elevated, it looks like someone dragged the default box-shadow value in from a tutorial and never touched it again. Real depth in an interface is subtle almost to the point of being invisible until you compare it against a flat element side by side. Here's the difference between a shadow that reads as "designed" and one that reads as "default," and how to actually build the former.
Why most box-shadows look heavy or fake
Two habits cause almost every bad shadow. The first is using pure black at a high opacity — real shadows are never actually black, they're a darker, desaturated version of whatever's around them, so pure black reads as artificial the moment you look closely. The second is trying to get the whole effect out of a single shadow layer, cranking up blur and spread until it "looks right," which tends to produce something soft and smeared instead of something that reads as a real object sitting above a surface.
What each part of box-shadow actually controls
box-shadow: 0px 4px 8px rgba(0,0,0,0.15); breaks down into offset-x, offset-y, blur radius, spread radius, and color. Offset-y is usually the one that matters most for realism — a shadow directly behind an element (0px offset) looks like a glow, not elevation; a shadow pushed downward implies a light source above and reads as an object actually lifted off the surface.
Blur radius controls how soft the edge is — larger blur values suit elements that are meant to feel "higher up," since real shadows get softer the further the object is from the surface. Spread radius expands or shrinks the shadow's size independent of blur, and it's the one most people leave at zero, which is usually the right call — a small negative spread is more often useful than a positive one, since it keeps a soft shadow from bleeding too far past the element's edges.
Layering shadows instead of relying on one
CSS lets you stack multiple shadows on the same element, comma-separated, and this is the single biggest upgrade from "generic drop shadow" to "actually looks elevated." A typical layered approach uses one tight, low-blur, low-opacity shadow close to the element for edge definition, and a second, softer, more spread-out, even lower-opacity shadow further away to suggest ambient depth:
box-shadow: 0px 1px 2px rgba(0,0,0,0.08), 0px 8px 24px rgba(0,0,0,0.06);
Neither layer alone would look particularly convincing. Together, they mimic how real shadows actually behave — a sharper contact shadow right at the base, and a diffuse ambient shadow spreading outward.
Shadow color matters more than people think
Instead of defaulting to black, try a dark, desaturated version of the background color the element sits on, or a dark tint of the page's dominant color. A card sitting on a warm off-white background looks noticeably more cohesive with a warm dark-brown shadow than a flat black one — it reads as light interacting with the actual surface instead of a generic overlay dropped on top.
Building an elevation system instead of one-off shadows
Rather than inventing a new shadow value every time something needs to look "raised," define a small set of elevation levels once and reuse them consistently — a resting state for cards sitting flat on the page, a slightly raised state for hover, a stronger shadow for genuinely floating elements like dropdowns and popovers, and the strongest for modals sitting above everything else. Each level up the scale typically increases both the offset and the blur, keeping the direction and general feel consistent while the intensity scales with how "high" the element is meant to feel.
Building and exporting one without guessing at values
Tuning offset, blur, spread, and color by hand and refreshing a browser tab repeatedly gets tedious fast. PalettIQ's CSS shadow generator lets you adjust each value with a live preview, stack multiple shadow layers, and set the shadow color directly, then export the finished CSS once it actually looks right instead of iterating blindly in your stylesheet.
What to avoid
- Using the same heavy shadow on every element regardless of how elevated it's actually meant to feel.
- Defaulting to pure black at a high opacity instead of a dark, tinted, low-opacity color.
- Applying shadows to everything on the page, which flattens the whole point of using them to signal hierarchy in the first place.
- Skipping the offset entirely and centering the shadow directly behind the element, which reads as a glow rather than elevation.
Questions that come up building these
Why does my box-shadow look fake or too heavy?
Almost always one of two reasons: a single shadow trying to do too much (too much blur and spread in one layer instead of splitting it into two subtler layers), or a shadow color that's pure black instead of a dark, slightly tinted version of the background.
What's a layered shadow, and why does it look more realistic?
It's two or more box-shadow values stacked on the same element, usually one tight, low-opacity shadow close to the edge and one softer, more spread-out shadow further away. Real-world shadows behave this way too, so stacking two shadows tends to read as more natural than one shadow trying to fake both effects at once.
Should shadow color always be black?
No, and this is one of the biggest upgrades most box-shadows are missing. Pure black shadows often look muddy or artificial. Using a dark, desaturated version of the element's own background color, or the page's dominant color, tends to look more grounded and less like a generic default.
How many elevation levels do I actually need?
Most interfaces get by fine with 3 to 4 levels — something like resting, hovered, raised (like a dropdown or modal), and maybe one for a floating action element. More than that usually adds complexity without a visible difference to users.
Is it bad to put a shadow on every card or element?
It dilutes the effect. If everything has a shadow, nothing reads as elevated above anything else. Shadows work best when they're reserved for elements that are meaningfully different in depth — a modal over a page, a dropdown over a list — not applied uniformly out of habit.
Depth should be felt, not noticed
The best box-shadows are the ones nobody consciously registers — they just make a card feel like it's genuinely sitting above the page instead of pasted onto it. That effect comes from restraint: low opacity, layered shadows instead of one heavy one, a tinted color instead of flat black, and shadows reserved for elements that actually need to feel elevated rather than applied everywhere out of habit.