Vertical Linear Gradient - html

Question

I am trying to get a vertical effect for a sidebar on a page. I have tried the deg option but it still shows a horizontal line
.sidebar {
position: relative;
display: inline-block;
padding: 15px 25px;
background-image: linear-gradient(90deg, #1559EC, #1559EC);
color: #fff;
font-size: 36px;
font-family: Arial;
border-radius: 3px;
box-shadow: 0px 1px 4px -2px #333;
text-shadow: 0px -1px #333;
}
.sidebar:after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: calc(100% - 4px);
height: 50%;
background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
}
<div class="sidebar">
The quick brown fox
</div>

Answer 1

The issue is not the gradient but the pseudo element. The gradient is using the same color so the angle is useless. What you need is to invert height/width values on the pseudo element and adjust the direction of its gradient. You can also replace the gradient of the main element by simple color:
.sidebar {
position: relative;
display: inline-block;
padding: 15px 25px;
background:#1559EC;
color: #fff;
font-size: 36px;
font-family: Arial;
border-radius: 3px;
box-shadow: 0px 1px 4px -2px #333;
text-shadow: 0px -1px #333;
}
.sidebar:after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 50%;
height: calc(100% - 4px);
background: linear-gradient(to right,rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
}
<div class="sidebar">
The quick brown fox
</div>
And you can simplify it like below using multiple background on the main element:
.sidebar {
position: relative;
display: inline-block;
padding: 15px 25px;
background:
linear-gradient(to right,rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2)) 2px 2px/50% calc(100% - 4px)no-repeat,
#1559EC;
color: #fff;
font-size: 36px;
font-family: Arial;
border-radius: 3px;
box-shadow: 0px 1px 4px -2px #333;
text-shadow: 0px -1px #333;
}
<div class="sidebar">
The quick brown fox
</div>

Answer 2

The gradient you're trying to change has both colors the same so you won't see the difference. The easiest way to make what you want IS using a generator since the code for each render engine is a bit different.
The easiest keyword solution is to use "to direction" instead of a degree. See below. The first box is top to bottom and the second is left to right.
Your example has a pseudo-class (:after) adding a second gradient to create the hard line. You could achieve a similar effect by adding more stops to the gradient.
.box{
width: 100px;
height: 100px;
margin-bottom: 20px
}
.gradient1 {
background: linear-gradient(to bottom, #8fc400, #29b8e5);
}
.gradient2 {
background: linear-gradient(to right, #8fc400, #29b8e5);
}
.gradient3 {
background: linear-gradient(to bottom, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%);
}
<div class="box gradient1">
</div>
<div class="box gradient2">
</div>
<div class="box gradient3">
</div>