Mesh Gradient Generator [+ Noise] – Figma/SVG Export

Export Gradient

Download SVG for Webinfo icon Copy SVG for Figmainfo icon
New Gradient
New Positions New Colors

Colors Add color

Background

Noise

Blur

Noise Blend Mode

Aspect Ratio Help icon

Gradient Gallery

Why use this mesh gradient generator?

This tool is the quickest way to create & tinker with mesh gradients on the web 🙂

It also allows a one-click export into Figma (the “Copy SVG for Figma” button above – click it, then open Figma and paste).

The quickest way to generate vivid mesh gradients

Easy:

  1. Add a bunch of color swatches (“+” button)
  2. Shuffle until you get good colors (“New colors” button)
  3. Shuffle positions until you like the result (“New positions” button)

Optionally, you can adjust the color values, swatch sizes and layering, noise, and blur. But the formula above is fast 😎

One-click export Mesh Gradient to Figma

Once you have a gradient you like, you can copy the Figma-friendly SVG code to your clipboard by pressing “Copy SVG for Figma”.

Then open Figma, press paste, and you can continue editing your mesh 👍

Note: Figma cannot properly import SVG-based noise. So you’ll find instead that the noise is a group of raster-based layers 🤨. Feel free to edit or remove entirely. If you’re looking for fine-grained noise controls, the best plugin is Rogie’s Noise & Texture.

Blend modes for Noise effect

There are currently three differently noise blend options (If you want to play with more, export to Figma first and then tinker there):

  • Overlay. This leads to the grittiest, grainiest texture at high opacities.
  • Soft light. Similar to overlay in strength of the effect, but yields a much smoother texture.
  • Luminosity. Appears as a more classic fine-grained noise, but tends to darken light colors.

More on Color

For more color tools and articles on using color in UI design, check out:

  • Color in UI Design: A Practical Framework. My take on why color theory sucks, and what UI designers need to know instead.
  • Gradient Generator. This is my standard gradient generator (no noise, no mesh). It allows you to create linear, radial, or conic gradients – and makes them especially vivid by interpolating the colors in radial color spaces 🤓. Confusing? Try it – you'll like it 😉
  • Design Hacks, my newsletter where I send original design tips and tactics to 60,000+ of my closest friends.

And, as always, send me feedback and feature requests. I aim for this to be the very best mesh gradient tool on the web – so what do you want to see? 😎