Remove right side of box shadow

by

Update:

clip-path is now (2020) supported in all major browsers.

Original Answer:

If you’re willing to use experimental technology with only partial support, you could use the clip path property.

This will provide you with exactly the effect I believe you are after: a normal box shadow on the top, left and bottom edges and clean cut-off on the right edge. A lot of other SO solutions to this issue result in shadows that “dissipate” as they near the edge that is to have no shadow.

In your case you would use clip-path: inset(px px px px); where the pixel values are calculated from the edge in question (see below).

#container {
    box-shadow: 0 0 5px rgba(0,0,0,0.8);
    -webkit-clip-path: inset(-5px 0px -5px -5px);
    clip-path: inset(-5px 0px -5px -5px);
}

This will clip the div in question at:

  • 5 pixels above the top edge (to include the shadow)
  • 0 pixels from the right edge (to hide the shadow)
  • 5 pixels below the bottom edge (to include the shadow)
  • 5 pixels outside of the left edge (to include the shadow)

Note that no commas are required between pixel values.

The size of the div can be flexible.

Leave a Comment