Mesh Gradient Generator

Design beautiful, fluid mesh gradients with optional noise textures

Color Stops

#1e1e1e
1
0%
0%
50%
2
100%
0%
60%
3
0%
100%
70%
4
100%
100%
50%

Texture (Noise / Grain)

0%
0.8

CSS Output

background-color: #1e1e1e;
background-image: radial-gradient(circle at 0% 0%, #ffb199 0%, transparent 50%), radial-gradient(circle at 100% 0%, #ff0844 0%, transparent 60%), radial-gradient(circle at 0% 100%, #667eea 0%, transparent 70%), radial-gradient(circle at 100% 100%, #764ba2 0%, transparent 50%);

Examples

Hero-section backdrop

Input
4 colour stops · Sunset palette (#ffb199, #ff0844, #667eea, #764ba2) · 10% noise · no transparency
Output
background-image: url("data:image/svg+xml;…feTurbulence…"), radial-gradient(circle at 0% 0%, #ffb199 0%, transparent 50%), …

The CSS output stacks the noise data URI over four radial gradients so the texture sits on top of the colour mesh.

Abstract social banner

Input
6 colour stops · randomised palette · 20% noise · frequency 1.2
Output
A high-resolution PNG with dense colour blending and visible grain.

More stops plus stronger grain produces a more painterly look suitable for LinkedIn / Twitter banners.

About this tool

Mesh gradients blend several radial gradients over a base colour to create the soft, organic backgrounds that have become a signature of modern UI and social-media design. The Mesh Gradient Generator places up to six colour stops on an invisible 2D plane and lets you drag each one to a new x/y position with a chosen spread radius — the preview rebuilds live as plain CSS radial-gradients.

A built-in noise / grain overlay uses an inline SVG feTurbulence filter (a W3C standard SVG filter primitive) to add a subtle texture, which prevents the gradient from looking flat on large surfaces. The output is plain CSS that any modern browser can render, plus a standalone SVG version and a high-resolution PNG. Everything renders client-side — no canvas, no network calls — so you can iterate quickly and copy the result straight into a stylesheet.

How to use

  1. Start from defaults or randomise

    The canvas starts with four colour stops at the corners. Click Randomize to explore new palettes or pick colours that match your brand.

  2. Position each stop

    Drag the X / Y sliders to move a stop across the canvas (0–100%), and tune the Spread Radius to control how soft or hard each blob is.

  3. Add or remove stops

    Up to six stops are supported; the tool refuses to add a seventh. You must keep at least two stops so the mesh stays a mesh.

  4. Add grain

    Switch on Noise Opacity (0–30%) and tune the Noise Frequency to add an SVG feTurbulence texture that gives the gradient a tactile feel.

  5. Copy CSS, SVG or PNG

    Copy CSS for stylesheets, Copy SVG for a portable markup asset, or Export PNG for slides and social posts.

Use cases

Marketing hero sections

Replace flat hero backgrounds with an on-brand mesh gradient that scales without banding.

Card and panel backgrounds

Use a softer gradient and minimal noise to add depth to dashboard cards without distracting from content.

Social media banners and thumbnails

Export a high-resolution PNG ready for Twitter, LinkedIn, YouTube or podcast artwork.

Design system tokens

Copy the CSS as a `--bg-mesh-*` custom property so designers and engineers stay in sync.

Common mistakes

Mistake:Adding more than six stops for higher density.

Fix:The tool caps at six to keep the CSS performant. Increase stop overlap or use noise instead of more stops.

Mistake:Going overboard with noise opacity.

Fix:Subtle grain (5–15%) reads as texture; above 25% the gradient looks dirty and small text becomes harder to read.

Mistake:Forgetting the base colour when exporting.

Fix:The base colour sits underneath the radial gradients — picking a mid-tone close to the average of your stops avoids visible dark or light seams.

Mistake:Saving the SVG to a server without sanitising it.

Fix:The exported SVG embeds the noise filter and gradient markup; upload it as-is or sanitise before use in user-editable contexts.

Frequently asked questions

References & standards

Related tools

Markdown to HTML / JSX Converter

Convert Markdown to clean HTML or React JSX with GitHub-Flavored Markdown, syntax highlighting

Regex Tester

Test JavaScript regular expressions with live match highlighting, capture groups, named groups, flag toggles, substitution/replace preview, and shareable links

Freelance Invoice Generator

Create and download professional invoices as PDF directly in your browser

Hourly Rate Calculator

Calculate your minimum freelance hourly rate based on income goals and expenses

Social Frame Studio

Convert screenshots into social media ready posts with backgrounds and frames

Code Snippet to Image

Convert code snippets into beautiful, high-resolution images for sharing