Why Box Shadows Look Bad on 90% of Websites

Open any random website built in the last five years and you'll find the same shadow: box-shadow: 0 2px 5px rgba(0,0,0,0.3);. It's the default that gets copy-pasted from Stack Overflow and never questioned. The result is a shadow that looks too dark, too sharp, and too uniform — the opposite of how shadows behave in the physical world.

Real shadows are not dark grey bands below objects. They are subtle, diffuse, and dependent on the distance of the light source and the distance of the object from the surface. A card sitting 2mm above a table casts a tight, close shadow. The same card lifted 20mm casts a wider, softer, more diffuse shadow.

That physical behaviour is exactly what box-shadow can simulate — when you understand what each parameter controls. Here's what most developers get wrong.

The Parameter That Changes Everything: Blur Radius

Blur radius is the most misunderstood box-shadow parameter. Most developers keep it low — 3px, 5px — because anything higher feels "too fuzzy". But high blur radii, combined with low opacity, are what create the soft, airy shadows that make good design systems feel premium.

Compare these two shadows on a white background:

The visual difference is significant. High blur + low opacity reads as natural depth. Low blur + high opacity reads as a clumsy outline. The first approach scales gracefully across screen sizes and background colors. The second fights against both.

Spread Radius — Underused and Misunderstood

Spread radius expands or contracts the shadow before blurring is applied. Most developers leave it at zero, and for most use cases, that's fine. But spread radius enables two specific effects that are otherwise impossible.

Positive spread for outline glow: Setting zero offsets, zero blur, and a positive spread with a coloured shadow creates a solid colour outline around an element. This is technically a border without using the border property — useful when you need an outline that doesn't affect layout.

/* Solid colour outline using box-shadow — doesn't affect layout */
box-shadow: 0 0 0 3px #667eea;

/* Combine with actual shadow for focus ring + depth */
box-shadow: 0 0 0 3px #667eea, 0 4px 20px rgba(0,0,0,0.1);

Negative spread for tight directional shadows: A negative spread combined with a directional offset creates a shadow that only appears on one side of the element. This is useful for top navigation bars, sticky headers, and sidebar separators.

/* Shadow only on the bottom — for sticky nav bars */
box-shadow: 0 4px 6px -4px rgba(0,0,0,0.2);

/* Shadow only on the right — for left sidebars */
box-shadow: 4px 0 6px -4px rgba(0,0,0,0.2);

Building Multi-Layer Shadows That Look Real

The single most impactful improvement you can make to your box shadows is adding a second layer. Physical objects cast two types of shadow simultaneously: a key shadow (from the primary light source, directional and crisp) and an ambient shadow (from ambient light, non-directional and very diffuse).

CSS allows comma-separated multiple shadows on one element. The first shadow in the list renders on top. Here's how to build a two-layer shadow that closely approximates physical depth:

/* Material Design Elevation System — CSS Implementation */

/* Elevation 1 — barely lifted */
box-shadow:
  0 1px 3px rgba(0,0,0,0.12),
  0 1px 2px rgba(0,0,0,0.08);

/* Elevation 2 — card resting state */
box-shadow:
  0 3px 6px rgba(0,0,0,0.1),
  0 3px 6px rgba(0,0,0,0.07);

/* Elevation 4 — modal, dropdown */
box-shadow:
  0 10px 20px rgba(0,0,0,0.12),
  0 6px 6px rgba(0,0,0,0.08);

/* Elevation 8 — floating action button */
box-shadow:
  0 14px 28px rgba(0,0,0,0.18),
  0 10px 10px rgba(0,0,0,0.12);

Notice the pattern: as elevation increases, both the vertical offset and the blur radius grow. The vertical offset represents the key shadow (the object is further from the surface). The blur represents the ambient shadow spreading more as the object rises. The opacity stays in the 0.08–0.18 range throughout.

Inset Shadows — The Overlooked Half of the Property

The inset keyword flips the shadow to appear inside the element's border box. Most developers use it only for pressed button states and never think about it again. But inset shadows have a surprisingly broad range of applications.

Input focus states: Rather than changing the border color (which shifts layout in older layouts), an inset shadow can provide a clear, accessible focus indicator that doesn't affect element dimensions.

/* Input focus — inset shadow for depth without layout shift */
input:focus {
  outline: none;
  box-shadow: inset 0 2px 6px rgba(102,126,234,0.3),
              0 0 0 2px rgba(102,126,234,0.4);
}

Neumorphism effects: The neumorphic design trend — where UI elements appear to be extruded from the background — uses both inner and outer shadows simultaneously. The technique requires two shadows: a light shadow in the highlight direction and a dark shadow in the shadow direction.

/* Neumorphic card — requires matching element and background color */
.card {
  background: #e0e5ec;
  box-shadow:
    6px 6px 12px rgba(163,177,198,0.6),
    -6px -6px 12px rgba(255,255,255,0.8);
}

/* Neumorphic pressed state */
.card.pressed {
  box-shadow:
    inset 4px 4px 8px rgba(163,177,198,0.6),
    inset -4px -4px 8px rgba(255,255,255,0.8);
}

Animating Box Shadows — The Right and Wrong Way

Box-shadow is animatable, but animating it directly has a performance cost. Every frame of a box-shadow animation triggers a repaint of the affected area. On complex layouts, this can cause jank on lower-end devices.

The performant technique is to animate opacity on a pseudo-element that holds the shadow, rather than animating the shadow property itself. But for most cases — a card hover effect, a button focus ring — direct box-shadow animation is perfectly acceptable.

/* Standard hover shadow animation — fine for most use cases */
.card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

/* Performant alternative for complex animations */
.card {
  position: relative;
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.card:hover::after {
  opacity: 1;
}

Coloured Shadows — When to Use Them and When Not To

Black shadows are the safe choice, but coloured shadows — particularly shadows that match or are darker than the element's background colour — are a powerful branding tool when used correctly.

The most effective use of coloured shadows is on coloured buttons and components. A purple button with a purple shadow at 40% opacity creates a glow that reinforces the brand colour and makes the button look luminous rather than flat. A green success banner with a green shadow reads as a natural lighting effect.

/* Coloured glow — effective on coloured backgrounds */
.btn-primary {
  background: #667eea;
  box-shadow: 0 4px 20px rgba(102,126,234,0.5);
}

.btn-primary:hover {
  box-shadow: 0 6px 28px rgba(102,126,234,0.7);
}

/* Danger button with red glow */
.btn-danger {
  background: #e53e3e;
  box-shadow: 0 4px 20px rgba(229,62,62,0.4);
}

Indian Web Design Context — Shadows in Real Projects

🇮🇳 E-commerce in India: Indian e-commerce platforms — from large marketplaces to independent Shopify stores — rely heavily on card-based product grids. Subtle drop shadows (blur 15–25px, opacity 8–12%) distinguish product cards from the background without adding visual noise. For promotional banners and featured products, a slightly deeper shadow (blur 30px, opacity 15–20%) creates a natural hierarchy.

🇮🇳 SaaS dashboards for Indian businesses: Enterprise SaaS tools targeting India — accounting software, HR platforms, ERP systems — increasingly use Material Design elevation principles. The multi-layer shadow approach gives data-heavy dashboards a sense of structured depth without the decorative weight that would compete with dense data tables and charts.

🇮🇳 Mobile-first consideration: With a significant portion of Indian web traffic on mid-range Android devices, shadow performance matters. Keep box-shadow declarations on fewer elements, use lower blur radii on mobile breakpoints, and test on actual mid-range hardware. A shadow that looks refined on a MacBook can cause perceptible lag on a budget smartphone.