Bezier curve gradient in html5/css3

Question

Doesn't look like its possible to do a non-linear (e.g. Bezier-curve fill) css3 gradient; anyone know if it's possible in html5 canvas?

Answer 1

I think the initial comment is really about the rate of progression from one color to another within the gradient, not the physical shape of the gradient.

To address the former: no, unfortunately at this time there is no way to do non-linear CSS gradient fills. However, you can use successive color stops to achieve some level of control over the shape of your gradient.

You could mess with the little squares under the gradient in the Colorzilla gradient generator or read the MDN linear-gradient article for detailed info on creating your own color stops.

The color stops can be used pretty creatively, especially combined with background-size. Here is a great collection of CSS patterns built using gradients.

CSS preprocessors can also be used to generate gradients that feel non-linear (although they simply generate lots of stops without you having to think about each one). A recent CSS Tricks article about easing linear gradients demonstrates one such approach.