Re: [css4-images] Non-linear interpolation between gradient color stops

On Jan 21, 2015, at 17:16, Jonathan Rimmer <jon.rimmer@gmail.com> wrote:

> I was reading the Gradient Color-Stops section of the ED for images level 4[1]. It seems to me that, even with the proposed color interpolation hint, gradients are still underpowered for creating smooth and aesthetically satisfying gradients, of the kind produced by tools like Photoshop, or in natural phenomenon such as sunsets.
> [snip]
> 
> I'd like to see CSS provide a similar smoothing ability for gradients. In order to produce Photoshop-like gradients, the color interpolation hint could accept a cardinal-spline(<number>) function, where <number> represents a tension for a the spline between the two affected color stops.
> 
> However, Photoshop's cardinal splines, while simple to use, also limit control to some degree. A more powerful approach is demonstrated by the tool Gentle Gradient[4]. This tool uses a quadratic bezier curve to interpolate between two color stops, with a middle color acting as the control point. This can be used to simulate real-world lighting effects that can otherwise only be approximated through complex, multi-stop, linearly-interpolated gradients.
> 
> CSS could provide a similar capability by accepting a quad-bezier(<color>), or cubic-bezier(<color>, <color>), function as the color interpolation hint. The <color> parameters would act as the control points for the interpolation curve in the color space between the two affected color stops.

I really like this idea. Perhaps we could have a color-interpolation property that controls how color interpolates altogether? Default could be linear, to be consistent with current behavior.

~Lea

Received on Wednesday, 21 January 2015 16:55:13 UTC