Mesh Gradient Generator

Build a soft mesh gradient from presets or your own colors, then export it as PNG, SVG, or ready-to-paste CSS. Free, no signup, no watermark.

Written By Andrei Terteci

Last updated 7 days ago

The Mesh Gradient Generator is at krumzi.com/tools/mesh-gradient-generator. It makes the soft, multi-point color blends you see behind hero sections, app screens, and slide decks. It's free, there's no signup, and exports carry no watermark. Everything you make is fine to use commercially.

Building a gradient

  • Start from a preset. The gallery has twelve named looks (Aurora, Peach Sorbet, Deep Ocean, Lavender Haze, Ember, Mint, Slate, Golden Hour, Cotton Candy, Neon Punch, Sunset Coral, and Forest). Click one and it loads into the editor.

  • Or pick a palette. The Palettes dropdown holds a set of ready-made color combinations you can apply in one click.

  • Edit the colors. Change any color, add more (up to eight), or remove the ones you don't want. Paste your brand hex codes here to match your palette exactly.

  • Shuffle the layout. Click the shuffle button on the preview, or press the spacebar, to reposition the color blobs until the composition feels right.

  • Add grain. The Grain slider adds a subtle film texture that keeps large flat areas from looking like plastic.

  • Set the resolution. Use the resolution picker to choose the size you want the PNG rendered at.

Three ways to export

OptionWhat you getBest for

Export PNG

A raster image at your chosen resolution, grain included

Social posts, slide backgrounds, most web use

Download SVG

A clean vector file that scales to any size

Print, huge hero art, anywhere edges must stay crisp

Copy CSS

Stacked radial-gradient rules that match the preview

Website backgrounds where a few lines of code beat an image file

The grain texture is a raster effect, so it's baked into the PNG but left out of the SVG and CSS versions.

Tips

  • Putting text on top? Keep it high-contrast against the busiest part of the gradient, or add a soft dark overlay so every word stays readable.

  • Two or three colors that sit close together on the color wheel read as calm. Add a contrasting accent for energy.

  • Need it to move? This tool exports a still. For a looping video version, use the free Animated Background Generator instead.

Inside the full app

Mesh gradients are also one of the background modes in the Krumzi editors, so the AI can generate a design with a mesh background and you can tweak it, or ask the AI to change it, without leaving your project.