How to get box-shadow on left & right sides only
HtmlCssHtml Problem Overview
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.
Html Solutions
Solution 1 - Html
> 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);
Solution 2 - Html
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>
Solution 3 - Html
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 id="example1"></div>
<div id="example2"></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 id="example3">
content here
<div class="shadow"></div>
</div>
Solution 4 - Html
Try this, it's working for me:
box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;
Solution 5 - Html
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 class="shadow-element"></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 class="shadow-element"></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 edgeBpx
rightCpx
bottomDpx
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.
Solution 6 - Html
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 id="wrap">
<div></div>
</div>
Solution 7 - Html
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;
Solution 8 - Html
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>
Solution 9 - Html
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 class="shadowcontainer">
<img src="https://www.google.es/images/srpr/logo11w.png" class="innercontent" style="with:100%"/>
</div>
Solution 10 - Html
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.
Solution 11 - Html
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 class="parent">
<div class="box-shadow">content</div>
</div>
Solution 12 - Html
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.
Solution 13 - Html
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.
Solution 14 - Html
This worked for me:
box-shadow: 0 5px 5px 0 #000;
Solution 15 - Html
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);
}
Solution 16 - Html
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);