CSS Box Shadow Not Working? 8 Fixes to Try

Box-shadow is simple until it is not. When nothing shows up, the cause is almost always one of these eight things. Check them in order.

Overflow Hidden on a Parent Element

This is the most common reason shadows disappear. A parent element with overflow: hidden clips the shadow because shadows render outside the element bounds.

/* BAD — shadow will be cut off */
.parent {
  overflow: hidden;
}
.child {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* FIX — add padding to parent instead */
.parent {
  padding: 16px;
}
.child {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

Open browser DevTools, inspect the element, and check the parent chain for overflow: hidden. It could be several levels up.

Shadow Color Is Too Transparent

A shadow like 0 4px 16px rgba(0,0,0,0.02) is technically correct CSS but visually invisible. Verify the opacity is high enough to contrast with the background.

Quick test: swap to a fully opaque red to confirm the shadow is actually rendering:

box-shadow: 0 4px 16px red;

If you see red, the shadow works — just increase the opacity on your real value. If you still see nothing, the issue is something else on this list.

Shadow Color Matches the Background

A dark grey shadow on a dark grey background is invisible. This happens most often when you set a shadow color close to your surface color.

The shadow needs to be darker than the background (or lighter, for dark modes). Test with an obvious color first to confirm rendering, then tune from there.

Sell Custom Apparel — We Handle Printing & Free Shipping

Z-Index and Stacking Context Issues

If an overlapping sibling element is sitting on top of the element with the shadow, the shadow is hidden underneath it. This is not a shadow problem — it is a stacking order problem.

.element-with-shadow {
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

Adding position: relative and a positive z-index usually resolves this when shadows are hidden by adjacent elements.

Checking the Computed Style in DevTools

Open DevTools (F12), select the element, and look at the Computed tab. Search for "box-shadow". If the value shows "none" but you set a shadow, there is a CSS specificity conflict overriding it.

In the Styles tab, look for a strikethrough on your box-shadow declaration. That confirms it is being overridden. Increase specificity or remove the conflicting rule.

Three more things to check in DevTools:

• Is transform: translateZ(0) or will-change: transform on the element? These create a new stacking context which can affect shadow visibility.
• Is there a filter property? Filters can affect how shadows render in some browsers.
• Is the element opacity set to 0? The shadow would be invisible too.

CSS Grid and Flexbox Overflow Clipping

Grid and flex containers clip overflowing content by default in some contexts. If your shadowed element is inside a grid or flex container, the shadow may be cut at the container boundary.

/* Add padding to the container */
.grid-container {
  padding: 16px;
  gap: 16px;
}

The padding gives the shadows room to render inside the container bounds without being clipped.

Frequently Asked Questions

Why does my box-shadow disappear on hover?

Check if the hover state has box-shadow: none or if a parent has overflow: hidden. Also confirm the transition syntax is correct — an invalid transition declaration can prevent the value from changing at all.

Box-shadow works in Chrome but not Safari — why?

Box-shadow is fully supported in all modern browsers without prefixes. If you see a difference, check for a -webkit-box-shadow declaration conflicting, or an element with -webkit-appearance that overrides styles.

Why does my shadow show on three sides but not the fourth?

Usually overflow: hidden on a parent, or the shadow direction is wrong. Set all offsets to 0 and use only spread: box-shadow: 0 0 0 4px red to confirm all-sides rendering, then adjust offsets from there.