Colour fade to transparent on both sides of a div - html

Question

I need to create strip with a colour fade on each side of a div as shown in image below using CSS.
How to do so?

Answer 1

Over a plain colour:
To make the colour fade on both sides, you can use 2 inset box-shadows with a positive blur and negative spread radius :
DEMO
body {
background: #D4D4CC;
}
div {
height: 100px;
background: #fff;
box-shadow: inset 100px 0px 100px -50px #D4D4CC,
inset -100px 0px 100px -50px #D4D4CC;
}
<div></div>
Over an image :
If you need to fade both sides over an image or a non plain colour, you can use this approach with a pseudo element and a box-shadow :
Output :
div{
height:100px;
overflow:hidden;
padding:0 100px;
margin:20px;
}
div:before{
content:'';
display:block;
height:100%;
background:#D4D4CC;
box-shadow: 0px 0px 80px 50px #D4D4CC;
}
body{
background: url('http://i.imgur.com/hPLqUtN.jpg');
background-size:cover;
}
<div></div>
Note that box-shadows are supported by IE9 and over

Answer 2

kind of what you want, its css gradients. check w3schools.
i provide a sample code. put this in your class
background: -webkit-linear-gradient(left, red , white, red); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, white, red); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, white, red); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , white, red); /* Standard syntax (must be last) */
border-top: 5px solid red;
border-bottom: 5px solid red;

Answer 3

You could use gradient / the gradient tool from http://www.colorzilla.com/gradient-editor/
and this fiddle i just made for you:
http://jsfiddle.net/52f4awdc/
.gradient {
background: rgb(219,218,210); /* Old browsers */
background: -moz-linear-gradient(left, rgba(219,218,210,1) 1%, rgba(255,255,255,1) 53%, rgba(219,218,210,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(219,218,210,1)), color-stop(53%,rgba(255,255,255,1)), color-stop(100%,rgba(219,218,210,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(219,218,210,1) 1%,rgba(255,255,255,1) 53%,rgba(219,218,210,1) 100%); /* Chrome10+,Safari5.1+ */
}

Answer 4

You can try like this:
HTML:
<div class="outer">
<div class="inner"></div>
</div>
CSS:
.outer {
background-color:#ccc;
width:400px;
margin:0 auto;
height: 30px;
padding:5px;
}
.inner {
background: -moz-linear-gradient(left, rgba(255,255,255,0.54) 0%, rgba(255,252,173,1) 16%, rgba(255,252,173,1) 85%, rgba(255,255,255,0.41) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.54)), color-stop(16%,rgba(255,252,173,1)), color-stop(85%,rgba(255,252,173,1)), color-stop(100%,rgba(255,255,255,0.41)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0.54) 0%,rgba(255,252,173,1) 16%,rgba(255,252,173,1) 85%,rgba(255,255,255,0.41) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0.54) 0%,rgba(255,252,173,1) 16%,rgba(255,252,173,1) 85%,rgba(255,255,255,0.41) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0.54) 0%,rgba(255,252,173,1) 16%,rgba(255,252,173,1) 85%,rgba(255,255,255,0.41) 100%);
background: linear-gradient(to right, rgba(255,255,255,0.54) 0%,rgba(255,252,173,1) 16%,rgba(255,252,173,1) 85%,rgba(255,255,255,0.41) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8affffff', endColorstr='#69ffffff',GradientType=1 );
width:100%;
margin:0 auto;
height: 100%;
}