How to make a mesh gradient
- Press Randomize or pick a palette to start. Each dot on the preview is a color point.
- Drag the dots to move the colors around, and tap a dot to choose its color. Add up to eight points.
- Adjust Softness to blend the colors more or less, and Grain for a subtle film texture that prevents banding.
- Choose a shape and size, such as a phone wallpaper or a 4K desktop background, and download the PNG. Or copy CSS for a website background.
What is a mesh gradient?
A mesh gradient blends several colors in two dimensions instead of along one line, creating the soft, glowing "aura" backgrounds popular in app design, wallpapers and social media posts. This generator weights each point's color by its distance (inverse distance weighting), then applies a gentle blur, which gives smooth organic blends from just a few points. A touch of grain makes it look like a photographic gradient and stops visible color bands on screens.
The CSS export approximates the mesh with layered radial gradients, which is how many websites create aura backgrounds without images. For the exact look, use the PNG. Wallpaper sizes match current phones (iPhone 15/16 class and common Android screens) and desktop resolutions up to 4K.
Images are generated in your browser and are yours to use anywhere.
What size should a phone wallpaper be?
Match your screen resolution, for example 1179 × 2556 for many recent iPhones. Larger images are scaled down without harm.
Why add grain?
Smooth gradients can show visible bands on 8-bit screens. Fine noise breaks up the bands and adds texture.
Can I use these backgrounds commercially?
Yes. They are generated on your device and there are no restrictions.