How to create mesh gradients in Sketch
By: Oscar Oto
Tags: Gradient, Design, Plugins, Mesh, Sketch

Mesh gradients, made easy

A mesh gradient is basically a mesh (😅) where every vertex (or point) has a specific color. And the mesh does the magic to interpolate the colors from one vertex to the surrounding ones. This simple. On top of that each vertex may have some tangents (like bezier points), which will affect the interpolation, but essentially that’s it.

Still, creating them is hard because… well, there are a ton of points, and finding the right balance between the position, tangents, and color of each point, and its correlation and gradation with the rest of the points may be quite tricky.

So we tried to make the process simpler, by enabling two workflows: create a gradient from scratch, or start from an already created gradient.

Create a gradient from scratch

Building a gradient from scratch is pretty simple:

Define a color for each corner. Mesh gradients will calculate the intermediate colors from one corner to the other. Set the mesh divisions (default is 2x2, which means 9 vertices). Once you’re happy with the overall look, start playing with each of the individual points’ color and tangents. This is where going crazy creative with your mouse rocks 🤘🤘🤘.

Some tips

Having a lot of mesh divisions gives more control about the gradient, but also makes it more complex to handle all points and get smooth interpolation. Typically 2x2, 3x3, and 4x4 will be more than enough for your creations.

You may change corner colors and divisions as you wish, and Mesh gradients will reset and recalculate the mesh live. If you’ve done an edit on the mesh itself (moving a point, changing its color, …), it will ask you if you really want to reset it (discard the edits done), or keep the current edit state.

Use the collection to bootstrap your gradient

Creating a quite complex gradient may still be tricky, so if you’re more like it, pick a collection one, and just start tweaking points and colors.

Some tips

The mesh divisions cannot be changed on Collection gradients, as it would affect the nature of the defined gradient. Still, you can use them as inspiration (“how are they built?”) and go create your own.

What does Mesh gradients generate?

Mesh gradients produces a hi resolution bitmap of your mesh gradient, and uses it in a regular Fill that can be used on any layer, and that you can extend by playing with additional properties right from the Inspector Panel.

And, as any Image Fill, can be adjusted to Fill, Fit, Tile, or Stretch. And as any layer, can be exported as you wish.

If there is a selected layer, Mesh gradients will apply the gradient to it. Otherwise, it will create a 1000x1000 rectangle in the selected artboard (or current page, if there’s none).

The gradient definition is safely stored in the Sketch file. This way you (or anyone with Mesh gradients installed) will be able to tweak it as needed. Just select the shape, and launch Mesh gradients again to edit your gradient.

A real mesh. A real gradient.

Mesh gradients uses Three.js to create a real 3D mesh, and Hermite bicubic color interpolation to generate awesome real mesh gradients.

Actually, by pressing the M key you can toggle the gradient and mesh views, which (aside of cool) is pretty useful, as you can see how the mesh is performing, and if your points or tangents are causing bizarre overlaps, which may result in strange (or awesome!) gradients.

Conclusions

It is quite hard to create nice looking mesh gradients in your designs. And nearly impossible to create real mesh gradients natively in Sketch (nor Figma).

Hopefully Mesh gradients will make it easy to create awesome mesh gradients for your Heros, sections, and whatever you may imagine!

That’s all, folks! Hope it helps! And if you give it a play, let us know how it worked for you! 🥰