[css4-images] Reflected gradients

Conical gradients are a fantastic addition to Image Values [1]. However, quite often, designers need to reflect a conic gradient, to avoid unwanted hard lines at the point where 0deg meets 360deg. An easy way to reflect gradients would be useful for any gradient type, but it’s especially essential for conic gradients. 

== Algorithm ==

One possible way it could work is convert the 0-100% range to 0-50% and flip it for the 50-100% positions. Here are some examples:

conic-gradient(white, black) becomes conic-gradient(white 0%, black 50%, white 100%)
conic-gradient(white 20%, black 90%) becomes conic-gradient(white 10%, black 45% 55%, white 90%)
conic-gradient(white -50%, black 150%) becomes conic-gradient(white -25%, hsl(0, 0%, 75%) 50%, white 125%)

I can write up a stricter definition if you’re interested.

== Syntax ==

I see multiple options here:
1. One option would be to add new functions like reflected-*-gradient(). I'd suggest we avoid that, not only due to its lack of elegance but also because we can't interpolate between different functions. and there is no reason to prevent interpolation between reflected gradients and non-reflected gradients.
2. A keyword in the beginning (`reflected`?). For example:
 linear-gradient(reflected to top left, white, black)
 radial-gradient(reflected circle farthest-side at top left, white, black)
 conic-gradient(reflected at top left, white, black)
3. A keyword after the last color stop, like so: conic-gradient(white, black, reflected)

Thoughts?

[1]: http://www.w3.org/TR/css4-images/#conic-gradients


Lea Verou
W3C developer relations
http://w3.org/people/all#lea ✿ http://lea.verou.me ✿ @leaverou