CODEWITHSUNDEEP
htmlcssgradient
user4654090
user4654090

Reputation:

Colour fade to transparent on both sides of a div

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?

div with fading colour on both sides

Upvotes: 1

Views: 6709

Answers (4)

web-tiki
web-tiki

Reputation: 103810

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 fading on both sides over image

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

Upvotes: 16

G.L.P
G.L.P

Reputation: 7217

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

Upvotes: 0

Doml The-Bread
Doml The-Bread

Reputation: 1771

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+ */
}

Upvotes: 1

wrick17
wrick17

Reputation: 701

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;

Upvotes: 2

Related Questions