You can use angles to define the direction of your linear-gradients. The problem is that, while angles are used in both middle syntax and new syntax, the definitions differ.
0deg as bottom-to-top, and then the degrees proceed clockwise, so that 90deg is left-to-right.0deg as left-to-right, and then the degrees proceed counter-clockwise, so that 90deg is bottom-to-top.And yes, this is annoying. On the other hand, what good is a new specification if you don’t change stuff at random?
new angle = 90 - middle angle middle angle = 90 - new angle
Fortunately, calculating angles is pretty easy. If you have an angle in one system, subtract it from 90 to get the angle in the other system. If the result is negative you may add 360, but that’s not required.
background: -webkit-linear-gradient(0deg,red,yellow,green); background: linear-gradient(0deg,red,yellow,green);
So 0deg means bottom for unprefixed new syntax, and left for prefixed middle syntax.
New syntax
Middle syntax
background: -webkit-linear-gradient(45deg,red,yellow,green); background: linear-gradient(45deg,red,yellow,green);
Then we move 45 degrees; clockwise for unprefixed new syntax, counterclockwise for prefixed middle syntax. They end up in the same corner (90 - 45 = 45).
New syntax
Middle syntax
background: -webkit-linear-gradient(-225,red,yellow,green); background: linear-gradient(315deg,red,yellow,green);
Negative angles are also allowed; then the unprefixed new syntax goes counterclockwise, and the prefixed middle syntax clockwise. This example uses -225deg for the middle syntax, so the new syntax needs 90 - -225 = 315deg
New syntax
Middle syntax
background: -webkit-linear-gradient(135deg,red,yellow,green); background: linear-gradient(-45deg,red,yellow,green);
Let’s say we want the gradient to start at bottom right. That’s -45deg (or 315deg) in the new syntax, and 90 - -45 = 135deg in the middle syntax.
New syntax
Middle syntax
background: -webkit-linear-gradient(303deg,red,yellow,green); background: linear-gradient(147deg,red,yellow,green);
Or the half-way point between top left and top, which is about 303deg in the middle syntax. In the new syntax that’s 90 - 303 = -213deg. Let’s say you’re fastidious about negative values, so you add 360 for an end result of 147deg.
New syntax
Middle syntax