Different rendering outputs for -webkit-linear-gradient and linear-gradient with identical parameters

Question

Can someone explain why using background: -webkit-linear-gradient(-45deg, black, red); produces a different result than background: linear-gradient(-45deg, black, red); even though both have the same values?

Difference between -webkit-linear-gradient and linear-gradient with negative deg

but background: -webkit-linear-gradient(45deg, black, red); (45deg instead of -45deg) produces the same value as background: linear-gradient(45deg, black, red); (which is the expected result).

I can't understand why -webkit-linear-gradient doesn't give the same result (with identical parameters) as linear-gradient when dealing with negative deg.

I hope I explained it clearly :)))

Answer 1

The definition of where angles start and the direction is different between -webkit-linear-gradient and linear-gradient.

In -webkit-linear-gradient from: https://webkit.org/blog/1424/css3-gradients/

angles run counter-clockwise, and 0deg is to the right

In linear-gradient from https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient

A value of 0deg is equivalent to to top; increasing values rotate clockwise from there.