Related
I'm looking to specify a different linear gradient for each of the 4 separate sides of a border. I care about Chrome only. I don't want to use hack's or backgrounds. I swear I did this in an old project I did, using the following extremely crude example:
border-top:linear-gradient (top to bottom, 0%, red, 100%, blue),
-webkit:etc...,
-moz:etc...;
border-bottom:etc...
border-left:etc...
border-right:etc...
I hope this is a duplicate question, but I looked everywhere (including: Create a border gradient for each of the 4 borders) and didn't find the answer I'm looking for.
As mentioned by #Harry, I very much doubt this was easily possible in a previous project (seeing as in the linked answers previously, this is very much a 'must hack' situation) - both of the answers being answered by myself and Harry.
I have not come across a situation where that has ever been easily possible (hence why people ask such questions), and hence why we don't give 'easy' answers.
This is the hence reason why I have included the following snippet:
div {
height:300px;
width:400px;
position:absolute;
}
.one, .two {
position:absolute;
}
.one:before, .one:after{
content:"";
position:absolute;
height:10px;
width:400px;
left:0px;
top:0px;
background: rgb(242,246,248); /* Old browsers */
background: -moz-linear-gradient(left, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(242,246,248,1)), color-stop(50%,rgba(216,225,231,1)), color-stop(51%,rgba(181,198,208,1)), color-stop(100%,rgba(224,239,249,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9',GradientType=1 ); /* IE6-9 */
}
.one:after{
top:auto;
bottom:0;
background: rgb(180,221,180); /* Old browsers */
background: -moz-linear-gradient(left, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(180,221,180,1)), color-stop(17%,rgba(131,199,131,1)), color-stop(33%,rgba(82,177,82,1)), color-stop(67%,rgba(0,138,0,1)), color-stop(83%,rgba(0,87,0,1)), color-stop(100%,rgba(0,36,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400',GradientType=1 ); /* IE6-9 */
}
.two {
height:280px;
width:380px;
top:10px;
left:10px;
z-index:8;
}
.two:before, .two:after {
content:"";
position:absolute;
height:300px;
width:10px;
left:-10px;
top:-10px;
background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
.two:after{
background: rgb(169,3,41); /* Old browsers */
background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
left:auto;
right:-10px;
}
<div class="one">
<div class="two">Four gradients!</div>
</div>
Alternative
The alternative, as mentioned in both the comments AND linked question's answers, would be to use multiple background gradients and position them on corners. - Just as Harry had pointed out:
.border-image {
height: 200px;
width: 200px;
background: -webkit-linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -webkit-linear-gradient(0deg, transparent 10%, white 10%, red 50%, white 90%, transparent 90%), -webkit-linear-gradient(90deg, transparent 10%, white 10%, blue 50%, white 90%, transparent 90%), -webkit-linear-gradient(90deg, transparent 10%, white 10%, green 50%, white 90%, transparent 90%);
background: -moz-linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -moz-linear-gradient(0deg, transparent 10%, white 10%, red 50%, white 90%, transparent 90%), -moz-linear-gradient(90deg, transparent 10%, white 10%, blue 50%, white 90%, transparent 90%), -moz-linear-gradient(90deg, transparent 10%, white 10%, green 50%, white 90%, transparent 90%);
background: linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), linear-gradient(90deg, transparent 10%, white 10%, red 50%, white 90%, transparent 90%), linear-gradient(0deg, transparent 10%, white 10%, blue 50%, white 90%, transparent 90%), linear-gradient(0deg, transparent 10%, white 10%, green 50%, white 90%, transparent 90%);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 100% 20px, 100% 20px, 20px 100%, 20px 100%;
background-position: 0px 0px, 0px 100%, 0px 0px, 100% 0px;
padding: 20px;
}
<div class="border-image"></div>
But, to be completely honest, I don't believe there is (yet) a 'set way' of achieving this functionality (mainly because it is unlikely to be fairly popular) - and so creative solutions are used instead.
I currently am trying to use a linear-gradient from CSS3 as the background of a site, and from what I can tell, am following the spec to comply with Internet Explorer right, but I can't tell what's not working here.
body {
padding: 0px;
margin: 0px 0px 0px 0px;
background: rgb(0,0,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(26,42,132,1) 40%, rgba(33,29,155,1) 50%, rgba(26,42,132,1) 60%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(40%,rgba(26,42,132,1)), color-stop(50%,rgba(33,29,155,1)), color-stop(60%,rgba(26,42,132,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(26,42,132,1) 40%,rgba(33,29,155,1) 50%,rgba(26,42,132,1) 60%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(26,42,132,1) 40%,rgba(33,29,155,1) 50%,rgba(26,42,132,1) 60%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(bottom, rgba(0,0,0,1) 0%,rgba(26,42,132,1) 40%,rgba(33,29,155,1) 50%,rgba(26,42,132,1) 60%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(26,42,132,1) 40%,rgba(33,29,155,1) 50%,rgba(26,42,132,1) 60%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
We are using following CSS in one of our projects and it works on Chrome, Firefox and IE11.
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
background-image: -webkit-linear-gradient(#000, transparent);
background-image: -moz-linear-gradient(#000, transparent);
background-image: -o-linear-gradient(#000, transparent);
background-image: linear-gradient(#000, transparent);
See this Fiddle as well: http://jsfiddle.net/3ck72fbc/
I've Two CSS for HTML BODY Background
I'm using this css as background of my page ; i want to overlap these two and get combined effect?
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(0.5, #FFFFFF), color-stop(0.75, #FFFFFF), color-stop(1, #A3EF69));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
second one is
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(0.5, #FFFFFF), color-stop(0.75, #FFFFFF), color-stop(1, #A3EF69));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
How can i combine these two into one?
Two Issues with Your Code
First, the two images must be called within a single background-image call, otherwise the way the "cascading" part of CSS works the second one will just override the first. So the first thing that needs changing is to make all of the calls grouped like this (each successive call separated by commas):
background-image:
linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%),
linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
This is what the possible duplicate question noted to do, and that is correct, but it probably did not work for you because...
Second, each of those gradient images you have defined are non-transparent, so one of them will "over paint" on top of the other and effectively give you just one image. I think what you really want is a fade effect, which will require you to use alpha opacity to achieve. So every instance of #FFFFFF needs to change to rgba(255, 255, 255, 0), then you get the blending I believe you seek:
background-image:
linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%,
rgba(255, 255, 255, 0) 75%, #A3EF69 100%),
linear-gradient(bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%,
rgba(255, 255, 255, 0) 75%, #A3EF69 100%);
I'm using CSS3 and RGBA to create a white-to-transparent gradient:
div {
background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
background-image: linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 255, 255, 1)', endColorstr='rgba(0, 0, 0, 0)', GradientType=1);
padding: 2rem 0;
}
Fiddle here: http://jsfiddle.net/alecrust/fYz45/
However as you'll notice, the gradient is dark in the middle. I'm getting this:
And I'm expecting this:
How can I rectify?
Change your final step to #FFFFFF00 (rgba(255, 255, 255, 0)) instead of #00000000:
http://jsfiddle.net/fYz45/6/
The final color should be white, transparent, and not black transparent
instead of
rgba(0, 0, 0, 0)
end in
rgba (255, 255, 255, 0)
If anyone else if having trouble with gradients or getting a certain aspect (angles, transparency, etc.) I recommend trying this tool to learn more: http://www.colorzilla.com/gradient-editor/ The code below is a sample of what it can do. Transparency is controlled by the top squares, color on the lowers. It allows you to keep dropping more colors in. It has good backwards comparability as well and also some has presets.
`div {
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,58,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,58,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,58,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffff3a',GradientType=1 ); /* IE6-9 */
background-repeat: repeat-x;
padding: 2rem 0;
}`
div{
background-color:#ffffff;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#ffffff, endColorstr=#ffff01);
background-image:-moz-linear-gradient(left top, #ffffff 0%, #ffff01 100%);
background-image:-webkit-linear-gradient(left top, #ffffff 0%, #ffff01 100%);
background-image:-ms-linear-gradient(left top, #ffffff 0%, #ffff01 100%);
background-image:linear-gradient(left top, #ffffff 0%, #ffff01 100%);
background-image:-o-linear-gradient(left top, #ffffff 0%, #ffff01 100%);
background-image:-webkit-gradient(linear, left top, right bottom, color-stop(0%,#ffffff), color-stop(100%,#ffff01));
}
I have this CSS linear gradient working in Firefox and can't seem to get the same result to work in Safari and other browsers. its a paper like background for a contact field. I Have tried the whole body and a specific element and the style seems to only work in Firefox. Tried using the -webkit- and the -moz- but no luck. Any ideas?
textarea {
background-color: #fff;
background-image:
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;
display: block;
resize: none;
}
CSS
textarea {
background-color: #ffffff;
background-image:
-moz-linear-gradient(left, rgba(0, 0, 0, 0) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0) 81px),
-moz-linear-gradient(top, #eeeeee .1em, rgba(0, 0, 0, 0) .1em);
background-image:
-webkit-gradient(linear, left top, right top, color-stop(79px, rgba(0, 0, 0, 0)), color-stop(79px, #abced4), color-stop(81px, #abced4), color-stop(81px, rgba(0, 0, 0, 0))),
-webkit-gradient(linear, left top, left bottom, color-stop(.1em, #eeeeee), color-stop(.1em, rgba(0, 0, 0, 0)));
background-image:
-webkit-linear-gradient(left, rgba(0, 0, 0, 0) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0) 81px),
-webkit-linear-gradient(top, #eeeeee .1em, rgba(0, 0, 0, 0) .1em);
background-image:
-o-linear-gradient(left, rgba(0, 0, 0, 0) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0) 81px),
-o-linear-gradient(top, #eeeeee .1em, rgba(0, 0, 0, 0) .1em);
background-image:
-ms-linear-gradient(left, rgba(0, 0, 0, 0) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0) 81px),
-ms-linear-gradient(top, #eeeeee .1em, rgba(0, 0, 0, 0) .1em);
background-image:
linear-gradient(to right, rgba(0, 0, 0, 0) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0) 81px),
linear-gradient(to bottom, #eeeeee .1em, rgba(0, 0, 0, 0) .1em);
background-size: 100% 1.2em;
}
Demo
Resources
http://www.colorzilla.com/gradient-editor/
http://caniuse.com/css-gradients
Here you go, a complete cross browser CSS for CSS gradients
background: #1e5799; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */
Source
As far as your answer goes this is an invalid syntax
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
Microsoft provided this simple tool to generate gradients that support cross-browser: http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html