Css linear gradient with angles

Css linear gradient with angles
0

#1

can anyone explain the 90deg angle parameter

background: linear-gradient(90deg, red, yellow); /* Standard syntax

I have tried different angles with different colors I see they vary but I’m not quite sure what the angle is doing.

Thanks for any feedback!


#2

When using two colors, the degrees specified represents the starting point of the first color pointing straight out to the end color from that position. 0deg represents the bottom with higher degrees moving in a clock-wise direction.

Below is a representation of starting points.

(0deg, blue, yellow) would start blue at the bottom and end yellow at the top. (90deg, blue, yellow) would start blue at the left and end yellow at the right. See the following JSFiddle I created to show 8 different scenarios where I change the starting point of blue in 45 degree increments.

https://jsfiddle.net/cfhefper/


#3

Thanks so much that was a huge help. Great examples…appreciate your thorough help!!!