Mesh Gradient Generator

Create beautiful mesh gradient backgrounds

Mesh Gradient Generator

Color Points

#F97316Position: 20%, 30%

#E11D48Position: 80%, 20%

#7C3AEDPosition: 50%, 80%

#06B6D4Position: 10%, 70%

Canvas Size

CSS

background-color: #f97316;
background-image:
    radial-gradient(at 20% 30%, rgba(249,115,22,1) 0px, transparent 50%),
    radial-gradient(at 80% 20%, rgba(225,29,72,1) 0px, transparent 50%),
    radial-gradient(at 50% 80%, rgba(124,58,237,1) 0px, transparent 50%),
    radial-gradient(at 10% 70%, rgba(6,182,212,1) 0px, transparent 50%);

What is Mesh Gradient Generator?

Generate multi-color mesh gradients for website backgrounds, social media graphics, and UI designs. Pick your colors, position the control points, and get organic gradients that go beyond simple linear or radial patterns.

How to use

Choose your base colors by clicking the color swatches or entering hex values. Add up to 6 color control points.
Drag the control points on the canvas to change how the gradient flows.
Copy the CSS or download the gradient as a PNG.

Result

A UI designer creates a purple-to-teal mesh gradient with 4 control points for a landing page hero section, then copies the CSS to paste directly into their stylesheet.

Related Tools

Color Code Converter

Convert HEX, RGB, HSL & CMYK color codes

Color Converter

Convert HEX, RGB, HSL, HSV & CMYK codes

Color Mixer

Mix two colors together visually

Color Name Finder

Find the closest named color to any value

Complementary Color Finder

Find complementary colors for any input

Brand Color Explorer

Browse popular brand colors