How to Use the Mesh Gradient Image Generator
Create gradient images with smoothly blended colors by freely arranging multiple color points.
1. Choose a template
Click “Choose Template” to select a design you like. If you prefer to create the color scheme and arrange the color points from scratch, you can customize each setting without selecting a template.
Click “Randomize” to automatically change the background color and the colors, positions, and spread of four color points.
2. Adjust the background color and color points
Use “Background Color” to change the base color of the entire image.
Click the point you want to edit in the “Color Points” list. Its settings will appear in the “Edit Selected Point” section below the list. Use the color picker to change the point’s color and opacity.
You can add up to 12 color points. To remove a point, click the delete button on the right side of its row.
3. Adjust the position and spread of a point
Click the color point you want to reposition, then adjust “X Position” and “Y Position” in the “Edit Selected Point” section below the list. Both values can be set from 0% to 100%, allowing you to position the point precisely.
Use “Spread” in the same section to control how far the color extends around the point, from 0% to 200%. A higher value blends the color into a wider area.
You can also drag a numbered point in the preview to reposition it visually. Where colors overlap, points with higher numbers are drawn in front.
4. Check the preview
Your changes appear in the preview in real time. Turn off “Show Guides” to hide the numbered points and check the finished image.
5. Set the image size and save it as a PNG
Enter the width and height under “Output Image Settings,” then click “Download PNG” to save the image. The PNG is generated at the specified dimensions, not at the size shown in the preview.
Click “Reset” to restore the customization settings to their initial values.
What Is a Mesh Gradient?
A mesh gradient is a gradient effect created by placing multiple colors at different positions on a plane and blending them smoothly together.
A standard linear gradient changes color in one direction, while a radial gradient changes color outward from a central point. A mesh gradient lets you position multiple color points freely, producing more complex color transitions with a greater sense of depth.
In addition to vivid color schemes, you can combine soft pastels or muted colors to create gentle backgrounds and sophisticated designs.
FAQ
What is the difference between a mesh gradient and a standard gradient?
A standard gradient changes color in a regular pattern along a set direction, such as a line or a radial path. A mesh gradient lets you freely position multiple color points, allowing you to create more complex and irregular color transitions.
Can I move the color points?
Yes. Drag a numbered point in the preview to move it. You can also enter precise values under “X Position” and “Y Position.”
How many color points can I add?
You can add up to 12 color points in this tool. Each point can be removed individually. If you remove all the points, the image will show only the background color.
What does “Spread” mean?
“Spread” controls how far a color extends around its point. A higher value blends the color across a wider area, while a lower value keeps the color more localized.
Can I edit a template after selecting it?
Yes. A template provides an initial color scheme and point arrangement. After selecting one, you can freely change the background color and each color point’s color, opacity, position, and spread.
Can I use the generated images commercially?
Yes. You may use the generated images for both personal and commercial purposes. No credit is required.
What file format and image sizes are supported?
Images are saved in PNG format. You can set both the width and height from 1 to 4096 pixels.
Are my settings sent to a server?
No. The gradient and image export are processed entirely in your browser, so your settings and generated image are neither sent to nor stored on a server.
