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?
5
-
3The only non-linear type of gradients in CSS3 is radialZoltan Toth– Zoltan Toth2012-07-18 22:08:50 +00:00Commented Jul 18, 2012 at 22:08
-
1Thanks, but was meaning non-linear & non-radial.stephenwil– stephenwil2012-07-18 22:10:35 +00:00Commented Jul 18, 2012 at 22:10
-
2@stephenwil Well Zoltans comment pretty much nailed it. It is not possible (although: You can combine multiple backgrounds to achieve a non-linear gradient effect).Rob W– Rob W2012-07-18 22:12:56 +00:00Commented Jul 18, 2012 at 22:12
-
Ok thanks for the replies folksstephenwil– stephenwil2012-07-18 22:22:53 +00:00Commented Jul 18, 2012 at 22:22
-
I know it's been a while, but nowadays in addition to linear and radial there are also specs for conic gradients.Chris Ruppel– Chris Ruppel2017-05-16 05:48:33 +00:00Commented May 16, 2017 at 5:48
Add a comment
|
1 Answer
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.
