Mesh Gradient Generator
Create backgrounds with mesh gradients (blurred color patches) and download them as PNG or copy the CSS code.
How to create a mesh gradient online
Choose the background color and add colors
Select a base color and add up to 6 color spots that will blend together.
Randomize the positions
Press the randomize button to reposition the color spots until you find a combination you like.
Download the PNG or copy the CSS
Download the result as a ready-to-use PNG image, or copy the CSS code to apply it directly to your website.
Frequently asked questions about the mesh gradient generator
Mesh gradients have become popular as backgrounds for websites, apps, and social media thanks to their smooth and abstract appearance. This tool generates and downloads them directly in your browser.
What is a mesh gradient?
+
It's a gradient made up of several blended color patches that mix together, rather than a simple linear or radial transition between two colors.
How does it differ from a normal CSS gradient generator?
+
The CSS gradient generator creates linear or radial transitions between 2 and 4 colors. This generator creates a more organic effect with several independent color patches, and also allows you to download the result directly as a PNG image.
How many colors can I use?
+
You can combine between 3 and 6 colors in the same mesh gradient.
Can I download the result as an image?
+
Yes, you can download the mesh gradient directly in PNG format, ready to use as a background.
Is it free?
+
Yes, this tool is completely free.
Is my design uploaded to any server?
+
No. The entire process, from generation to PNG download, happens directly in your browser, with no data uploaded to any server.
Colors
Color Converter (HEX, RGB, HSL, CMYK)
Convert any color between HEX, RGB, HSL, and CMYK instantly, with live preview and the closest color name.
Color Palette Generator
Create harmonious 5-color palettes (complementary, analogous, triadic, or monochromatic) from a base color.
CSS Gradient Generator
Create linear or radial gradients with up to 4 colors and copy the ready-to-use CSS code.
WCAG Contrast Checker
Check if your text and background color combination meets AA and AAA accessibility levels.
Random Color
Generate a random color with one click and discover its name, HEX/RGB/HSL codes, and similar colors.
Color Picker (eyedropper)
Pick any color from your screen using the browser's eyedropper tool, or use the classic color picker.
Color Blindness Simulator
Upload an image and see how people with protanopia, deuteranopia, or tritanopia would perceive it.
Shades and Tints Generator
Automatically generate the lightest tints and darkest shades of any color, with its HEX code.
Color Mixer
Mix two colors and discover the intermediate tones step by step, with their HEX code.
Color Wheel (Harmonies)
Choose a color on the wheel and discover its harmonious combinations: complementary, analogous, triadic, and more.
Image Palette Extractor
Upload an image and automatically extract its dominant colors into a palette, with the HEX code for each one.
Average Color of an Image
Upload an image and instantly calculate its average color, with HEX, RGB and HSL codes.
Explore colors by family
More than 469 named colors, with their HEX, RGB, HSL and CMYK codes, organized into 12 color families.
