Box shadow inside box - html

Question

I want to set box shadow inside a box or div but only at right and left sides.
I want something like this below. Please help me.

Answer 1

To get it to appear only on the sides you need to essentially have two different sets:
box-shadow:inset 5px 0 8px -5px #000,inset -5px 0 8px -5px #000;

Answer 2

You can create one inner div and one outer div. Then you need to set the shadow separately for both divs.
.outer, .inner {
width: 200px;
height: 50px;
display: inlin-block;
}
.outer {
-webkit-box-shadow: inset 10px 0px 23px -9px rgba(0,0,0,0.75);
-moz-box-shadow: inset 10px 0px 23px -9px rgba(0,0,0,0.75);
box-shadow: inset 10px 0px 23px -9px rgba(0,0,0,0.75);
}
.inner {
-webkit-box-shadow: inset -10px 0px 23px -9px rgba(0,0,0,0.75);
-moz-box-shadow: inset -10px 0px 23px -9px rgba(0,0,0,0.75);
box-shadow: inset -10px 0px 23px -9px rgba(0,0,0,0.75);
}
<div class="outer">
<div class="inner"></div>
</div>
Or you can use also one div, with 2 inset parameters:
.outer {
width: 200px;
height: 50px;
display: inlin-block;
-webkit-box-shadow: inset 10px 0px 23px -9px rgba(0,0,0,0.75), inset -10px 0px 23px -9px rgba(0,0,0,0.75);
-moz-box-shadow: inset 10px 0px 23px -9px rgba(0,0,0,0.75), inset -10px 0px 23px -9px rgba(0,0,0,0.75);
box-shadow: inset 5px 0 8px -5px #000,inset -5px 0 8px -5px #000, inset -10px 0px 23px -9px rgba(0,0,0,0.75);
}
<div class="outer">
</div>

Answer 3

And what about a linear-gradeint solution:
.box {
width:200px;
height:100px;
background:
linear-gradient(to left,#ccc , transparent 20%),
linear-gradient(to right,#ccc , transparent 20%);
}
<div class="box">
</div>

Answer 4

You can do this using the two div's. check the below code.
But it will great if you can use the background image.
<div class="div1">
<div class="div2"><div>
<div>
.div1 {
width: 200px;
height: 100px;
border: 1px solid #c51e1e;
margin: 50px;
overflow: hidden;
}
.div2 {
width: 80%;
height: 100px;
margin: 0 auto;
box-shadow: 0px 0px 27px 17px #d6cdcd;
}

Answer 5

try this with html:
<div id="box"></div>
and css:
#box {
border: 1px solid;
position: relative;
overflow: hidden;
}
#box:before {
content: "";
box-shadow: 0px 0px 20px 10px #888888;
position: absolute;
height: 100%;
width: 0px;
}
#box:after {
content: "";
box-shadow: 0px 0px 20px 10px #888888;
position: absolute;
height: 100%;
width: 0px;
right: 0px;
top: 0;
}