How to create mesh gradients in Sketch and Figma

We love mesh gradients. Everyone loves them!

I think it’s because they give a sense of natural lightning, and a super cool combination of “smooth sharpness” and blurriness that makes them feel sooo natural to us.

They evoke somehow what happens in the real world. Scenes like dawn, sunset, bokeh or komorebi. It makes things feel familiar and close. Makes them feel warm. Soft. Like home.

And from a practical point of view… they perform awesome almost everywhere. As Hero backgrounds, as an alternative to differentiate UI sections, to decorate and frame small pieces of content… even as a subtle effect in small components like buttons!

We love mesh gradients! We want them! But oh gosh… it’s so damn hard to create a cool looking one! 😅

There are plenty of tutorials about how to emulate mesh gradients by extreme blurring real-world pictures, or with shapes and tons of gaussian blur.

Michal Malewicz

has a cool article about Aurora UI and soft-blur backgrounds that I’d recommend.

But truth is that all of them feel like workarounds. It’s almost impossible to get a picture with the exact colors and lightning you’d like for your Hero background (I tried many times! 😅). And it’s quite hard to figure out the shapes, size, placement, blur, gradient, interpolation… you need on a scene to set a gradient that really works.

Illustrator does have the Mesh tool concept, which is the closest we’ve got to real mesh gradients. Still, its goals (as a feature) seem to be a bit different, and moving away from the Sketch or Figma workflow (and getting an Illustrator license) makes everything trickier.

So (drumroll)… we built Mesh gradients 😊 .

Mesh gradients

Mesh gradients is a plugin for both Sketch and Figma to create awesome mesh gradients right inside of your favourite tool.

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:

1. Define a color for each corner. Mesh gradients will calculate the intermediate colors from one corner to the other.
2. Set the mesh divisions (default is 2x2, which means 9 vertices).
3. 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 or Figma 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 or 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! 🥰