## Gradient angles

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.

• Unprefixed new syntax defines `0deg` as bottom-to-top, and then the degrees proceed clockwise, so that `90deg` is left-to-right.
• Prefixed middle syntax defines `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