csswg-drafts

csswg-drafts copied to clipboard

Mesh gradients and freeform gradients are becoming a popular design feature, and it would be useful to be able to generate mesh gradient images dynamically with a function in CSS. The nomenclature of 'mesh' vs 'freeform' seems to get conflated, but they are different things in tools like Adobe Illustrator.

Here's an example of a complex mesh gradient:

Why do we need a new feature?

Tools such as CSS Hero have mesh generators, but they only 'fake' it by layering radial gradients. You wouldn't be able to make a complex mesh like the one above using radial gradients.

How they work

Freeform gradients are generated by specifying any number of nodes at arbitrary coordinates on a canvas. Each node is given a colour. Then, some clever maths that I don't understand calculates a gradient between each node. (Any input from people familiar with how freeform gradients are generated would be appreciated.)

Mesh gradients seem to be more complex, and work using a 2D grid of nodes. The grid lines can be bent using bezier curves.

It's easier to understand how they work by playing around with them yourself. Here are some tools and videos to explain them better:

• Freeform gradient tool that generates them in a HTML canvas
• YouTube video that explains how both mesh and freeform gradients are generated in Adobe Illustrator

Possible syntax

For creating a freeform gradient, the gradient function could have a comma-separated list of coloured coordinates/nodes. I'm suggesting using <length-percentage> units for consistency with other gradient function syntaxes.

background-image: mesh-gradient(2% 2% red, 60% 40% gold, 90% 100% yellow);

I don't have a proposal for a mesh gradient syntax because they're more complex.