Kevinleary.net, LLC.

Remove Box Shadows From One Side with CSS

Simple CSS rules to remove box-shadow from one side of an element.

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);
}

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

Meet the Author

Kevin Leary, WordPress Consultant

I'm a freelance web developer and WordPress consultant in Boston, MA with 15 years of experience building websites and applications. View a portfolio of my work or request an estimate for your next project.