Re: [css3-images] conical-gradient()?

On Mar 21, 2011, at 10:46 AM, Lea Verou wrote:

> I've discussed this privately with Tab a while ago and since he thought it's a good idea, I figured I'd post it here to get wider feedback.
> 
> Conical gradients (sometimes referred to as angle gradients) are gradients created by a line segment rotated around one of its endpoints (which forms the center of the gradient), while smoothly transitioning its color. There's not really a "gradient line" concept in those (like in linear or radial gradients), but an imaginary "gradient ellipse" instead, around the container box.
> Some visual examples of the effect can be found by googling its name.
> Those are quite common in graphic design, especially when combined with semi-transparent radial gradients on top. Photoshop and many other image editing applications offer such a gradient type out of the box. They are widely used in color pickers (for the hue wheel),     starbursts, shiny metal textures and many other interesting effects. The twitter homepage also uses one on its header. Moreover, they can be used to make some patterns easier to code, like checkerboards. 
> 
> Its grammar could be something like:
> <conical-gradient> = conical-gradient(
>     [<bg-position>,]?  
>     <color-stop>[, <color-stop>]+
> )
> 
> <bg-position> having the same meaning as it does for radial gradients (where the center is). 

One reason we've avoided these so far is that many of the OS graphics libraries don't support them. For example, Core Graphics on Mac is not able to render conical gradients. This makes performant implementations much more challenging.

Simon