Gradient angle conflict

Question

Hey guys i am working with a simple CSS gradient :

background: linear-gradient(225deg, red 0%, white 10%, #aaaaaa 50%, #cccccc 56%, white 80%);

now look at the below diagram :

see that the angle 225 deg starts from the bottom-left side corner but however in the CSS example it the top-right corner from where the gradient begins . Why ??

i refered to MDNs docs on gradients and infact the W3c's examples itself are quite good at explaining gradients , but still can't figure this one out .

Thank.

Alexander.

Answer 1

Angles in CSS doesn't have the zero angle at the right, but at the top. Positive angles are clockwise, not counterclockwise.

The settings in the linear gradient doesn't specify where the gradient starts, but the destination of the gradient. Thus, an angle of 225 degrees has the destination in the bottom left corner, so it starts in the top right corner.

Answer 2

The degree means your gradient color goes along the 225 deg. And same as most math theorem, the starting point is (0, 0), the origin point. Starting point denotes 0%, which is red in your css code.

If you want the color started from left-bottom corner to top-right corner, you suppose to apply 45 deg.

Degree also indicates vectors. [1 1]' is 45 deg, which indicates a vector starts from left-bottom to top-right. [-1 -1]' is 225 deg, which indicates a vector starts from top-right to left-bottom.