DEV Community

Cover image for Remove Box Shadows From One Side with CSS
Kevinleary.net
Kevinleary.net

Posted on Originally published at kevinleary.net

Remove Box Shadows From One Side with CSS

#development

CSS’s native clip-path property makes it very easy to cutoff a box-shadow on one or more sides of an element. If you’ve ever wanted to use a box-shadow like a border, imagining something similar to box-shadow-top: none, then this is an ideal solution. There are many other more complex ways mentioned around the web for handling this, I was surprised this wasn’t mentioned as a solution.

This was originally introduced and is primarily used as a way to clip SVG <path> elements, but it works exactly the same way on a <div> or any other HTML element as well. This makes it great for solving this common problem.

Simple Example

Real-world Preview

CSS Clip Path Box Shadow Remove Top

CSS Rules 

div {
  box-shadow: 0 0 10px black;
  clip-path: inset(0px -10px -10px -10px);
}
Enter fullscreen mode Exit fullscreen mode

Inset will clip away the element from the top, right, bottom, and left edges. For a this shadow in the example we’re clipping anything beyond the top bounds, hiding the shadow on the top, and allowing 10px of space for the shadow on all other sides.

This is the best way to remove a box-shadow from one side of an HTML element. Browser support exists in all major browsers, refer to caniuse for more information. If you need to support Internet Explorer 11 then I suggest you look into using the polygon option in place of inset.

Alternative: Negative Spread Radius

The other technique worth knowing uses the fourth value in box-shadow shorthand, the spread radius, with a negative value that pulls the shadow in so it never escapes one side:

/* Shadow on the bottom only */
div {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}

/* Each side individually */
.shadow-top    { box-shadow: 0 -10px 10px -10px rgba(0, 0, 0, 0.5); }
.shadow-right  { box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.5); }
.shadow-bottom { box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); }
.shadow-left   { box-shadow: -10px 0 10px -10px rgba(0, 0, 0, 0.5); }
Enter fullscreen mode Exit fullscreen mode

The trick is making the negative spread equal to the blur radius, then offsetting the shadow toward the side you want it on. Because box-shadow accepts a comma-separated list, you can combine two sides (bottom and right, for example) in a single declaration.

Which Approach to Use

Both work everywhere, but they produce subtly different results. The clip-path method renders a normal shadow and then trims it, so the blur falloff on the remaining sides looks exactly like an unclipped shadow, including the corners. The negative spread method changes the shadow’s actual geometry, so the shadow fades out at the corners rather than wrapping them. Use clip-path when the shadow needs to look identical to the original on its remaining sides, and negative spread when you want a single-declaration solution with no risk of clipping child elements that overflow the box (dropdowns, tooltips), since clip-path cuts off anything outside the inset, not just the shadow.

Related Resources

Top comments (0)