Creating a gradient mesh in CSS/Jquery

Question

I'm not sure if this is possible or not, but can I use CSS/Jquery techniques to create a gradient mesh? Something similar to this

I'd like to randomly generate this mesh and then possibly animate it, so I'm trying to avoid using images. I'm not sure if something like this would even be possible.

I was thinking maybe creating several layers of individual gradients and then layering them all together into a fixed position and changing their opacity settings?

Answer 1

At present

I experimented with something along these lines a few years ago, using SVG, the HTML5 canvas tag, and more recently CSS3 gradients. I don't believe there's a natural way to go beyond simple linear or radial gradients at present.

The question is if a mesh gradient can be simulated using only simple linear and radial gradients (which are the only tools available).

Unfortunately, when you combine multiple gradients using opacity or rgba, the colors of the different gradients tend to combine in a way that's not useful, leading to washed-out colors. Avoiding this would require being able to render it in the browser as a single complex gradient.

There are also significant limitations to the shapes the gradients can have -- linear gradients at an arbitrary angle, and elliptical gradients with radial symmetry. Neither allows for free-form, irregular shapes. The 2D transformations that can be applied to the resulting image are fairly regular in nature as well (scaling, skewing, etc).

In the future

The most promising option I'm aware of for the near future is the possible support for mesh gradients in SVG 2.0 (and perhaps diffusion curves as well). If this does happen and it's eventually supported by browsers, that should start to greatly expand the options. And the HTML5 canvas tag and CSS3 may follow soon afterwards.

And as @vals pointed out in the comment below, WebGL should offer some very promising options (for HTML5 canvas tags using a 3D context).

Related links

• http://www.svgopen.org/2011/papers/18-Advanced_Gradients_for_SVG/
• http://w3-org.9356.n7.nabble.com/Diffusion-Curves-td146288.html