[csswg-drafts] [css-images] Mesh gradient / Freeform gradient (#7648)

JoshTumath has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-images] Mesh gradient / Freeform gradient ==
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:

![](https://user-images.githubusercontent.com/1760227/186539545-2692dde8-9f09-45b2-bde4-042352f366d9.jpg)

## Why do we need a new feature?

[Tools such as CSS Hero have mesh generators](https://csshero.org/mesher/), 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.

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](https://meshgradient.com/)
* [YouTube video that explains how both mesh and freeform gradients are generated in Adobe Illustrator](https://www.youtube.com/watch?v=8hJlffeGkmo)

## Possible syntax

For creating a freeform-style 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.

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

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7648 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 24 August 2022 23:51:49 UTC