[css-images] Mesh gradient / Freeform gradient / 2D gradient

[JoshTumath]

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 from our branding kit at the BBC:

Why do we need a new feature?

Tools such as CSS Hero try to replicate mesh gradients, 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

Creating the gradients

Freeform gradients are generated by specifying any number of nodes at arbitrary coordinates on a canvas. Each node is given a colour.

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

How they are created

See #7648 (comment)

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: freeform-gradient(red 2% 2%, gold 60% 40%, yellow 90% 100%);

The syntax definition would be the following: (Thanks @SebastianZ)

freeform-gradient([<color> <length-percentage>{2}]#{2,})

I don't have a proposal for a mesh gradient syntax because they're more complex. EDIT: See discussion in the comments about how mesh gradients might be better represented using SVG markup.

[faceless2]

There was a <meshgradient> element suggested for SVG2, although it's been withdrawn. It remains in the svg-next proposals, see https://svgwg.org/svg-next/pservers.html#MeshGradients. It was originally proposed by the Inkscape team.

We've implemented it, it's complex and trying to represent it as a function would be horrendous. If it ever makes it back into SVG it will be usable as a background-image and I would suggest that's probably the best approach.

For future reference, these are also called "Coons Patch" (or "tensor-product patch" mesh gradients, for the bicubic interpolation mode) and the maths is all defined in section 8.7.4.5.6 of the PDF spec, older versions of which are still publicly available. The SVG model is almost identical.

[JoshTumath]

Thanks @faceless2 for that background on the SVGWG's proposal. It sounds like the amount of data you have to specify to create a Coons Patch mesh gradient is quite complex, so using SVG images rather than a function in CSS to make one sounds like a better approach.

As for what Adobe calls 'freeform gradients', the way they are specified seems much simpler. I would be interested to see if there is a published spec or mathematical model for them.

[SebastianZ]

We've implemented it, it's complex and trying to represent it as a function would be horrendous.

@JoshTumath already provided an example for a more simplistic approach.

Written in CSS syntax, it would be

mesh-gradient([<length-percentage>{2} <color>]#{2,})

I assume that would restrict the interpolation between the color stops to be linear, though that probably already covers a lot of use cases.
And the syntax could still be extended in the future to allow Coons Patches if required.

As I understand it, Adobe's freeform gradients are restricted to four colors, which probably also cover many use cases but it's a big restriction if you want to create arbitrary gradients.

Sebastian

[JoshTumath]

As I understand it, Adobe's freeform gradients are restricted to four colors, which probably also cover many use cases but it's a big restriction if you want to create arbitrary gradients.

If that was true in the past, it looks as though that restriction doesn't exist in Illustrator any more. A designer in my team, Ollie Buchanan, just created this example that has 7 points:

[faceless2]

@JoshTumath already provided an example for a more simplistic approach.
I assume that would restrict the interpolation between the color stops to be linear, though that probably already covers a lot of use cases.
And the syntax could still be extended in the future to allow Coons Patches if required.

If we're going to define a 2D gradient syntax I would rather we do it once, in such a way that it covers the options. Make the simple things easy and the difficult things possible.

So, fond as I am of CSS, I'm not sure it's the right place for this. There are all sorts of interesting uses for 2D gradients and the end result of all of them is going to be a very large function with hundreds of arguments. CSS tooling isn't designed for these - they're going to be impossible to prototype, edit or understand by hand.

If a concept requires structure to usefully represent it then we should start with a structured container, like XML (in the form of SVG), rather than trying to force it into a function where it will be represented as a very long list of numbers.

[bradkemper]

The simple, free form version in the syntax suggested seems reasonable to me.

[svgeesus]

Freeform meshes take a set of points and then perform a Delauney trianglation to produce a mesh. They then use bilinear interpolation to generate the intermediate colors.

Thus, our current linear gradients are 1D linear gradients, and freeform are 2D linear gradients.

See also

• https://people.eecs.berkeley.edu/~jrs/meshpapers/delnotes.pdf
• https://www.jstor.org/stable/43693155

[svgeesus]

Skia supports mesh gradients and GLSL also.

• https://meshgradient.com/

[LeaVerou]

+1. I think this syntax works, covers a lot of mesh gradient use cases, and is much easier to implement than mesh gradients.

Notably, it enables this use case which is currently impossible (any color pickers on the Web fake it by overlaying semi-transparent gradients or use WebGL):

Based on recent resolutions and syntax, I’d adjust the grammar to:

freeform-gradient( [<color-interpolation-method>]?, [ <color> <bg-position> ]#{1,} )

Changes:

• We want <color-interpolation-method> on every gradient
• We recently resolved to allow gradients with 1 color stop and no positions
• Using <bg-position> also allows keywords, with established rules about defaulting.

[ydaniv]

Wix also has this tool, kinda like CSS Hero's Mesher, that overlays radial gradients - called Fluid Gradients:

It's like ~3 years old now, though our intent was actually faking mesh gradients.

I also tried playing with voronois on canvas and faking the bilinear interpolation by adding blur on top of it:
https://codepen.io/ydaniv/pen/VwMrKme?editors=0010

I think it's somewhat close to the syntax above, generating points, triangulate using Delanuay, interpolate.
Big +1!

[neneodonkor]

This will be a cool and needful feature.

[SebastianZ]

Given the very positive feedback from outside and inside the working group and @LeaVerou's concrete proposal, I think it's ready to be discussed on a call.

Sebastian