Here's a detail almost nobody consciously notices but everybody feels: shadows. Put a default card next to a carefully designed one and the designed one looks more expensive, even if the layout is identical. A big part of that difference is the shadow. The default box-shadow everyone reaches for is flat, gray, and a single layer - and it's one of the clearest tells that a design was defaulted rather than considered. Here's what's wrong with it and how to fix it in a few lines of CSS.
Why flat gray shadows look cheap
Real shadows in the physical world aren't pure gray, and they aren't a single hard edge. They pick up the color of the surface they fall on, they get softer and fainter the further they travel, and they're really a stack of overlapping shadows at different distances. The stock box-shadow: 0 4px 6px rgba(0,0,0,0.1) violates all of that - one flat, evenly-gray blur - so it reads as artificial. Your eye doesn't articulate why; it just clocks the element as flatter and cheaper.
Tinted shadows: carry the color
The single highest-leverage fix is to stop using gray. Instead of black at low opacity, tint the shadow toward the background or the accent color. On a warm paper background, a warm-tinted shadow feels natural; a cool gray one feels pasted on. The shadow should belong to the scene it's in.
/* Default - flat, gray, pasted-on */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
/* Tinted - shadow carries the surface/accent hue */
box-shadow: 0 4px 14px rgba(80, 40, 10, 0.12); /* warm surface */
/* or tinted toward a brand accent on colored buttons */
box-shadow: 0 8px 20px -6px rgba(229, 64, 42, 0.35);
Layer them for real depth
The second upgrade is to stack multiple shadows. A close, tight shadow grounds the element; a larger, softer one gives it height. Together they mimic how light actually falls, and the element reads as genuinely lifted off the page rather than stickered on.
/* Layered, tinted elevation - close + far */
box-shadow:
0 1px 2px rgba(20, 17, 11, 0.06),
0 4px 8px rgba(20, 17, 11, 0.06),
0 16px 32px -8px rgba(20, 17, 11, 0.10);
Use it with restraint
Better shadows are not more shadows. Elevation should mean something - a card that floats, a menu that pops, a button you can press. If everything on the page has a heavy shadow, nothing reads as elevated and the whole thing looks heavy. Reserve the richest shadows for the elements that are genuinely lifted, and let everything else sit flat.
Tinted, layered shadows are one of those details that never gets mentioned in a testimonial but quietly does half the work of making a product feel premium. Swap gray for a hue that belongs to your palette and stack two layers - it's ten minutes and it changes how expensive the whole UI feels.
See Keel - tinted, layered shadows throughout the "Gilt" design system
Top comments (0)