Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the to keyword, and effectively considered as a from position. The to syntax has been added in Firefox 10 and Opera 11.60 [8], without removing the deprecated syntax and translation between the two is trivial:

-moz-linear-gradient(to top left, blue, red);

is the same as:

-moz-linear-gradient(bottom right, blue, red);</code

Or am I misstaken? *confused*

div { linear-gradient(45deg, green 50%, lightblue 50%) 0 -50%; }

Thanks for the tip-off, Ted! The fault lies in my keyboarding skills, or more properly the lack thereof.

The syntax I find un-intuitive. When i figure out navigation in real life and anywhere else I do it in two steps, and we do it in two steps when we draw a linear gradient in any desktop application too:

1) where am I starting from? (click the start)
2) where do I want to go? (click the end)

So, I want to define a start point and an end point. That makes obvious sense. This magic-corners, always go through the middle, and define the gradient by only specifying the end point things I find really odd and do not fit my mental model.

Browsers that support keywords both with and without “to” are doing so in their *prefixed* versions just because they originally implemented the gradients before I added the keyword. Once they unprefix gradients (which they can do now, since the spec is CR), that won’t work anymore – only the “to ” version will remain.

This also explains the utter insanity of corner gradients working differently based on whether you use “to” or not – the original implementation (without “to”) had the “simple” corners, before I switched over and introduced “magic” corners. The magic-corner appears to much more often match what a designer intuitively wants.

Tickled by clockwise!