Any way to get box-shadow on left & right (horizontal?) sides only with no hacks or images. I am using:

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

But it gives shadow all around.

I have no borders around the elements.

0

16 Answers

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

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

4

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

<div></div>

---

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

<div></div>

8

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

<div></div>
<div></div>

---

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

<div> content here <div></div>
</div>

1

Try this, it's working for me:

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

1

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

<div></div>

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

<div></div>

---

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.

6

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

<div> <div></div>
</div>

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;

1

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

<div></div>

0

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
}

<div>
<img src=""/>
</div>

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

<div> <div>content</div>
</div>

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy