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 stunning multi-color mesh gradients for website backgrounds, social media graphics, and UI designs. Customize the number of color points, their positions, and colors to create unique 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 position them, adjusting the gradient flow to your liking.
Copy the generated CSS code or download the gradient as a PNG image for use in your projects.

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