Question

I have been experimenting with HTML5 and gradient fades, I would like to use 3 colours and gradually fade them into each other. Currently I can only get it working using two colours.

jsFiddle

My target is something similar to this image:

The colours should slowly fade into each other, i’m happy with the fade effect I currently have working, although would like to add a third colour.

I have tried to add an array of the colours to use, but the colour function was modded from a tutorial (will add link if I can find) and am not quite sure how to do it.

Could anyone offer any adivce?

Thanks in advance.

Am not trying to get it looking exactly the same as the image, but if I could just add another colour to my current version that should be fine.

Edit: Due to the confusion: I’m not looking for a “static” graident, if you view my example closely you will see a suttle fade effect. I want to achieve the same effect, but have the gradient with 3 colours and looking similar to the image above.

It should “shimmer” and a gradually fade. Offering a bounty as I’m struggling with creating this with 3 colours, which I think will be easy for most..

Answer 1

Unless you need to do some complex animation, you were doing some extremely unnecessary calculations for your gradient. The point of the gradient is that you give it some seed values and it generates everything in between automatically.

I worked up a sample gradient that looks similar to your reference image: http://jsfiddle.net/ZFayC/2/

Note that it looks like your reference image might have a small amount of texture to it, and that the gradient definitely isn’t linear. If you want to re-create the reference image, you’ll have to use some radial gradients and possibly overlay a texture.

Also, note that you were setting the canvas width and height via CSS properties. With the canvas element, CSS width and height control the magnification of the element, while DOM-level attributes control the actual dimensions.

---

Edit: I completely missed the fact that you were looking to produce an animated gradient. My apologies for that.

I went back and edited my example to smoothly transition between three pre-defined colors similar to the ones in your reference image. You can view the updated example here:

http://jsfiddle.net/fkU4Q/

Is this more along the lines of what you’re looking for?

---

Edit: Here’s another update that adds full-screen support, a diagonal gradient, and a secondary radial gradient that is overlaid in the middle to help give some variety:

http://jsfiddle.net/fkU4Q/2/

You might want to customize the colors a bit more to increase the variation, but hopefully the functionality is there now.