[css-images] Mesh gradient / Freeform gradient / 2D gradient
**EDIT: For those catching up on the issue, please read the Explainer doc.** [**You can read the 2D Gradients Explainer here.**](https://github.com/JoshTumath/Explainers/blob/main/css-2d-gradients/explainer.md) --- **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](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 ### 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](http
Posted by JoshTumath on Aug 24, 2022, 11:51 PM
Tags
Related issues
- [Meta] Feedback on granular control over Copilot changes
- unexpected status 401 Unauthorized issue
- [MODEL] Measurable quality regression in Claude generation 5 (Fable 5 / Opus 5 / Sonnet 5): worse nonsense detection, ~2x verbosity, under-disclosed model fallb
- [CRITICAL] Subagent spawning and subagent pattern bugs trigger infinite recursion, infinite token usage, grossly inefficient token usage, and lost accumulated s
- Video stops playing after some minutes
- [MODEL] Claude verbose code comments by default — ignores instructions to stop.
Raise real-world problems, find people facing the same issue, and discuss solutions.2,500 issues0 comments
github (Software)
[Meta] Feedback on granular control over Copilot changes
unexpected status 401 Unauthorized issue
[MODEL] Measurable quality regression in Claude generation 5 (Fable 5 / Opus 5 / Sonnet 5): worse nonsense detection, ~2x verbosity, under-disclosed model fallb
[CRITICAL] Subagent spawning and subagent pattern bugs trigger infinite recursion, infinite token usage, grossly inefficient token usage, and lost accumulated s
Video stops playing after some minutes
[MODEL] Claude verbose code comments by default — ignores instructions to stop.
Scope Codex VS Code chats to the current workspace/project
Update on "Co-authored-by: Copilot" in commit messages
[css-images] Mesh gradient / Freeform gradient / 2D gradient
**EDIT: For those catching up on the issue, please read the Explainer doc.** [**You can read the 2D Gradients Explainer here.**](https://github.com/JoshTumath/Explainers/blob/main/css-2d-gradients/explainer.md) --- **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](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 ### 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](http
Comments (0)
No comments yet. Start the discussion.