How to get box-shadow on left & right sides only

NOTE: I suggest checking out @Hamish's answer below; it doesn't involve the imperfect "masking" in the solution described here.

You can get close with multiple box-shadows; one for each side

box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/YJDdp/

Edit

Add 2 more box-shadows for the top and bottom up front to mask out the that bleeds through.

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/LE6Lz/

---

I wasn't satisfied with the rounded top and bottom to the shadow present in Deefour's solution so created my own.

inset box-shadow creates a nice uniform shadow with the top and bottom cut off.

To use this effect on the sides of your element, create two pseudo elements :before and :after positioned absolutely on the sides of the original element.

div:before, div:after { content: " "; height: 100%; position: absolute; top: 0; width: 15px; } div:before { box-shadow: -15px 0 15px -15px inset; left: -15px; } div:after { box-shadow: 15px 0 15px -15px inset; right: -15px; } div { background: #EEEEEE; height: 100px; margin: 0 50px; width: 100px; position: relative; }

Edit

Depending on your design, you may be able to use clip-path, as shown in @Luke's answer. However, note that in many cases this still results in the shadow tapering off at the top and bottom as you can see in this example:

div { width: 100px; height: 100px; background: #EEE; box-shadow: 0 0 15px 0px #000; clip-path: inset(0px -15px 0px -15px); position: relative; margin: 0 50px; }

---

Negative spread and Masking shadow

CSS box-shadow uses 4 parameters: h-shadow, v-shadow, blur, spread:

box-shadow: 10px 0 8px -8px black;

The blur parameter adds the gradient effect, but adds also a little shadow on top and bottom borders. To get rid of this side effect we can use:

Negative spread reduces the shadow on all borders: you can play with it trying to remove that little vertical shadow without affecting too much the one obn the sides (it's easier for small shadows, 5 to 10px.)

Masking shadows of the same color of the background (white in this case), which allows for ticker shadows. Note that this masking shadow needs to have blur = 0 to fully cover the side effects.

Here two examples, the second one uses Masking shadow:

div{ width: 100px; height: 100px; border: 1px solid green; margin: 10px; float: left; } #example1{ box-shadow: -10px 0 8px -8px black, 10px 0 8px -8px black; } #example2{ box-shadow: 0 -6px white, 0 6px white, -7px 0 4px -3px black, 7px 0 4px -3px black; }

If none of these approaches suit your needs, you can also add an absolute div on the side of any existing divs.

Just remember to set the container div as position: relative so this absolute div will stay inside.

#example3 { position: relative; width: 100px; height: 100px; margin: 10px; border: 1px solid green; } .shadow { position: absolute; height: 100%; width: 4px; left: 0px; top: 0px; box-shadow: -4px 0 3px black; }

---

Try this, it's working for me:

    box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;

---

clip-path is now (2020) the best way I have found to achieve box-shadows on specific sides of elements, especially when the required effect is a "clean cut" shadow at particular edges, like this:

.shadow-element { width: 100px; height: 100px; background-color: #FFC300; box-shadow: 0 0 10px 5px rgba(0,0,0,0.75); clip-path: inset(0px -15px 0px -15px); /* position and left properties required to bring element out from edge of parent so that shadow can be seen; margin-left would also achieve the same thing */ position: relative; left: 15px; }

...as opposed to an attenuated/reduced/thinning shadow like this:

.shadow-element { width: 100px; height: 100px; background-color: #FFC300; box-shadow: 15px 0 15px -10px rgba(0,0,0,0.75), -15px 0 15px -10px rgba(0,0,0,0.75); /* position and left properties required to bring element out from edge of parent so that shadow can be seen; margin-left would also achieve the same thing */ position: relative; left: 15px; }

Simply apply the following CSS to the element in question:

box-shadow: 0 0 Xpx Ypx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);

Where:

Apx sets the shadow visibility for the top edge

Bpx right

Cpx bottom

Dpx left

Enter a value of 0 for any edges where the shadow should be hidden and a negative value (the same as the combined result of the blur radius + spread values - Xpx + Ypx) to any edges where the shadow should be displayed.

---

Another way is with overflow-y:hidden on the parent with padding:

body { padding: 30px; } #wrap { overflow-y: hidden; padding: 0 10px; } #wrap > div { width: 100px; height: 100px; box-shadow: 0 0 20px -5px red; }

---

This works fine for all browsers:

-webkit-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
-moz-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;

---

You must use the multiple box-shadow; . inset property makes it look nice and inside:

div { box-shadow: inset 0 12px 15px -4px rgba(31, 73, 125, 0.8), inset 0 -12px 8px -4px rgba(31, 73, 125, 0.8); width: 100px; height: 100px; margin: 50px; background: white; }

---

For a nice inset shadow in right and left sides on images, or any other content, use it this way (the z-index:-1 does a nice trick when showing images or inner objects with insets):

.shadowcontainer{ display:inline-flex; box-shadow: inset -40px 0px 30px -30px rgba(0,0,0,0.9),inset 40px 0px 30px -30px rgba(0,0,0,0.9); } .innercontent{ z-index:-1 }

---

In some situations you can hide the shadow by another container. Eg, if there is a DIV above and below the DIV with the shadow, you can use position: relative; z-index: 1; on the surrounding DIVs.

---

Another idea could be creating a dark blurred pseudo element eventually with transparency to imitate shadow. Make it with slightly less height and more width i.g.

---

You can use 1 div inside that to "erase" the shadow:

.yourdiv{
    position:relative;
    width:400px;
    height:400px;
    left:10px;
    top:40px;
    background-color:white;
    box-shadow: 0px 0px 1px 0.5px #5F5F5F;

}
.erase{
    position:absolute;
    width:100%;
    top:50%;
    height:105%;
    transform:translate(0%,-50%);
    background-color:white;
}

You can play with "height:%;" and "width:%;" to erase what shadow you want.

---

I tried to copy the bootstrap shadow-sm just in the right side, here is my code:

.shadow-rs{
    box-shadow: 5px 0 5px -4px rgba(237, 241, 235, 0.8);
}

---

This worked for me:

box-shadow: 0 5px 5px 0 #000;

---

If you want your div to have an arrow on top of it, use this:

box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);

---

For horizontal only, you can trick the box-shadow using overflow on its parent div:

.parent{ overflow:hidden; } .box-shadow{ box-shadow: box-shadow: 0 5px 5px 0 #000; }

---