Prevent box shadow from showing on a specific side

There is a fourth distance you can define called the spread offset, which moves the shadow in or out on all 4 sides. So if you set that to the negative of the blur distance, this will shift the shadow inwards by the same distance as the blur extends the shadow outwards effectively hiding it. Of course this will also shift the shadow inwards on the side you do want it to appear so you'll need to increase the offset by the blur distance to undo that. i.e.

box-shadow: (horizontal + blur) 0px (blur) (-blur) color;

So in your example:

box-shadow: -8px 0px 5px -5px rgba(0,0,0,.8), 8px 0px 5px -5px rgba(0,0,0,.8);

Update

clip-path, as of 2020, is supported in all major browsers. (See Solution 1 below).

Original Answer

I have 2 possible solutions that produce exactly the desired effect: a "normal" box shadow on some edges and nothing on other edges. Many of the solutions listed in this and other S.O. questions result in shadows that "dissipate" as they near the edge that is to have no shadow, when really I believe most people are wanting a clean cut-off.

However, both solutions come with caveats.

Solution 1: clip-path (experimental)

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

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);
    clip-path: inset(0px -5px 0px -5px);
}

This will clip the div in question at:

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

Note that no commas are required between pixel values.

Absolute positioning is not required and the size of the div can be flexible.

Solution 2: clip (deprecated)

If:

  1. you were willing to set position: absolute on the div in question
  2. AND you know the dimensions of the div
  3. OR you don't know the dimensions of the div but you are willing to only remove the top and/or left shadows

...you could use the deprecated clip property.

You'd need to use clip: rect(px, px, px, px); where the pixel values are calculated from the top left. I've used it as follows to cut off the top box-shadow but keep the bottom and sides:

#container {
    position: absolute;
    box-shadow: 0 0 5px rgba(0,0,0,0.8);
    width: 100px;
    height: 100px;
    clip: rect(0px, 105px, 100px, -5px);
}

The above will clip the top and bottom box-shadows while leaving the 5px left and right box-shadows. Note that the size of the div must be known.

If the size of the div is not known this method will only work to clip the top and left shadows using something like clip: rect(0, 3000px, 3000px, 0); (note the massive value for the right and bottom values to allow the div to be any size).


You can also use clip:rect(0px, 210px, 200px, -10px);

Sadly I was never able to figure out a way to get it to work with a flexible sized box.

I often use this for drop down menues where I only want shadow on sides and bottom. In that case I just set the right and bottom clip values to some high number, such as

clip:rect(0px, 1000px, 1000px, -10px); /* Clip the top of the box-shadow off */

#box{
    box-shadow:             0px 0px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow:     0px 0px 10px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
    clip:rect(0px, 210px, 200px, -10px); /* Clip the top and bottom of the box-shadow off */
    width:200px;
    height: 200px;
    position: absolute;
    top:50px;
    left:50px;
    background:#eee;
}

Tags:

Css

Shadow

Recent Posts