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?
Doesn’t look like its possible to do a non-linear (e.g. Bezier-curve fill) css3 gradient;
Share
Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
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?
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.