how to make this gradient vertical - html

Question

I have a horizontal gradient bar: example
I am wondering, how to make it vertical instead of horizontal, with about 20px height.
HTML:
<div class="seperator-gradient"></div>
CSS:
.seperator-gradient {
width: 100%;
height: 10px;
border-bottom: background: #c4c4c4;
background: -moz-linear-gradient(left, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc));
background: -webkit-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: -o-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: -ms-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: linear-gradient(to right, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=1 );
}

Answer 1

Try this:
.seperator-gradient {
width: 100%;
height: 10px;
border-bottom: background: #c4c4c4;
background: -moz-linear-gradient(left, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc));
background: -webkit-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: -o-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: -ms-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: linear-gradient(to right, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=1 );
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
This will rotate what you have 90 degrees. I'm next to positive it's in the right direction, but if this goes the opposite way, change (90deg) to (270deg).

Answer 2

Try this code:
background-image: -webkit-gradient(
linear,
right bottom,
left bottom,
color-stop(0, #FAF5F5),
color-stop(0.55, #E0362D)
);
background-image: -o-linear-gradient(left, #FAF5F5 0%, #E0362D 55%);
background-image: -moz-linear-gradient(left, #FAF5F5 0%, #E0362D 55%);
background-image: -webkit-linear-gradient(left, #FAF5F5 0%, #E0362D 55%);
background-image: -ms-linear-gradient(left, #FAF5F5 0%, #E0362D 55%);
background-image: linear-gradient(to left, #FAF5F5 0%, #E0362D 55%);
You could use different css gradient creator also :D

Answer 3

This is what I came up with (note that the percentages maybe should be changed a little bit if you want it to have a such a small height). Anyway, for large heights this looks great:
JSFiddle
.seperator-gradient {
width: 100%;
height: 10px;
border-bottom: background: #c4c4c4;
background: -moz-linear-gradient(, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%);
background: -webkit-gradient(linear, center top, center top, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc));
background: -webkit-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: -o-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: -ms-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: linear-gradient(to right, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=1 );
}

Answer 4

Check the "ultimate css gradient generator", this is the best tool to make gradients, it will generate them the most crossbrowser way. http://www.colorzilla.com/gradient-editor/

Answer 5

I'm not sure if you want to make the bar vertical or the gradient, so I'll answer both. If you mean the bar then change:
width: 100%;
height: 10px;
to
width: 10px // or however wide you want it
height: 20px
If you mean the gradient needs to be vertical, use:
.seperator-gradient {
width: 100%;
height: 10px;
border-bottom: background: #c4c4c4;
background: -moz-linear-gradient(top, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc));
background: -webkit-linear-gradient(top, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: -o-linear-gradient(top, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: linear-gradient(to bottom, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 );