About a year ago, I was implementing linear gradients for an OpenType font renderer (using Cairo graphics library) and I decided to support CSS3 Linear Gradient syntax and functionality. Soon I realized that the specification is missing a basic feature of corner-to-corner linear gradients, that is getting the gradient's perpendicular lines (the lines that get the same color) sticking to the other opposite corners. This feature is pretty useful for the Web, where the page designer cannot be sure of the aspect ratio of the box in the user's end — as opposed to the traditional graphics design practice where document was delivered with a solid fixed layout.
I wrote to the CSS3 working group about the problem and proposed to add a keyword to enable this behavior, and temporarily called the keyword magic, as it was supposed to do something traditionally was done manually (and having a good eye). Although, the working group decided to totally change the behavior of the corner keywords and not add yet another keyword for this feature, the name magic corners stuck and is used for the invisible ending points of the gradient vector that makes this magical behavior possible.
This is the story of the name magic corners.
Now for you: The following box uses CSS3 (and some browser-specific directives) to set a magical linear gradient that is supposed to look like the image on the top of this post. If they do look alike, Congratulations! You've got some magic in your browser!
A box with magic-corner linear gradient.
background: linear-gradient(to top right, red, white, blue);
