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/
How can I add a box-shadow on one side of an element?
Yes, you can use the shadow spread property of the box-shadow rule:
.myDiv
{
border: 1px solid #333;
width: 100px;
height: 100px;
box-shadow: 10px 0 5px -2px #888;
}
<div class="myDiv"></div>
Box-Shadow Only on Left and Right
Use a negative value on spread-radius (4th value) to shrink the shadow. This can hide the unwanted top and bottom shadow.
box-shadow: inset 25px 0px 25px -25px rgba(0,0,0,0.45), inset -25px 0px 25px -25px rgba(0,0,0,0.45);
See DEMO.
Can CSS3 box-shadow:inset do only one or two sides? like border-top?
This is what worked for me:
box-shadow: inset 1px 4px 9px -6px;
Example: http://jsfiddle.net/23Egu/
How to create a drop shadow only on one side of an element?
UPDATE 4
Same as update 3 but with modern css (=fewer rules) so that no special positioning on the pseudo element is required.
#box {
background-color: #3D6AA2;
width: 160px;
height: 90px;
position: absolute;
top: calc(10% - 10px);
left: calc(50% - 80px);
}
.box-shadow:after {
content:"";
position:absolute;
width:100%;
bottom:1px;
z-index:-1;
transform:scale(.9);
box-shadow: 0px 0px 8px 2px #000000;
}
<div id="box" class="box-shadow"></div>
Box-Shadow on the left side of the element only
You probably need more blur and a little less spread.
box-shadow: -10px 0px 10px 1px #aaaaaa;
Try messing around with the box shadow generator here http://css3generator.com/ until you get your desired effect.
Related Topics
CSS Media Type: How to Load CSS for Mobile
Text with Image Background in Svg or CSS
@Import Styles Not Working in a Media Query
Mixin Property as an Argument of Another Mixin
How to Style Button Inputs to Be Identical in Chrome and Firefox
Apply a CSS Filter Only on Background
Div Height 100% and Expands to Fit Content
Why Doesn't a Child's Margin Affect a Parent's Height
Use CSS to Make a Span Not Clickable
Position Fixed Not Working Is Working Like Absolute
How to Add a Scroll Bar to a Div
Prevent Menu from Collapsing in 768Px Display CSS Media Query
Less CSS - Change Variable Value for Theme Colors Depending on Body Class