Remove Box Shadows From One Side with  CSS

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 Rules

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

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.

Related Resources

• StackOverflow: “Remove box shadow from only top of div?”
• Working Examples (Good Reference)
• CSS Tricks Information on Clip Path Usage