Create soft, colorful mesh gradients like the backgrounds on modern apps and websites. Drag the color points, warp them into aurora shapes, add film grain, then download a PNG at any size, from a phone wallpaper to 8K, or copy the CSS.
Last updated:
Drag the points · click to select · double-click the canvas to add a point · arrow keys move the selected point
nonestrong
subtlestrong
×
CSS (layered radial gradients)
CSS preview
Advertisement
Advertisement
How to use the Mesh Gradient Generator
Start from a palette or press Randomize until you like the colors.
Drag the color points on the canvas. Click a point to select it and change its color; double-click the canvas or press Add point for more.
Shape the blend with Softness (how far colors spread) and Warp (flowing, aurora-like distortion). Turn on Grain for a modern textured look.
Choose the size: pick a preset such as 1920 × 1080 or 1080 × 1920, or type any width and height.
Download PNG or Copy CSS to use the gradient on a website.
How the mesh gradient is calculated
Every pixel is a weighted average of all color points. A point's weight falls off smoothly with distance, using a Gaussian curve: w = e−d² / (2σ²), where d is the distance from the pixel to the point (measured relative to the shorter side of the image, so blobs stay round on wide images) and σ is set by the Softness slider. The final color is Σ wᵢ·colorᵢ ÷ Σ wᵢ.
The averaging happens in the OKLab color space rather than in RGB. OKLab is designed so that equal steps look equally different to the eye, so a blend from blue to yellow passes through clean greens and cyans instead of a dull gray. Warp shifts each pixel's lookup position with a few smooth sine waves before the distance is measured, which bends the color fields into flowing, aurora-like ribbons. Grain adds the same random brightness offset to the red, green and blue channels of each pixel.
Common sizes
Use
Size (px)
Aspect
Desktop wallpaper, slide, video background
1920 × 1080 / 2560 × 1440 / 3840 × 2160
16:9
Instagram square post
1080 × 1080
1:1
Instagram portrait post
1080 × 1350
4:5
Stories, Reels, phone wallpaper
1080 × 1920
9:16
Open Graph link preview
1200 × 630
1.91:1
X (Twitter) header
1500 × 500
3:1
Design tips
Use 4 to 6 points. Fewer looks like a simple gradient; many more turns muddy.
Combine one dark and several light colors for depth, or stay within neighboring hues (analogous colors) for a calm look.
Check text contrast. If you put text on the gradient, test it with a color contrast checker; light text needs the darker regions behind it.
Add a little grain (5 to 15%) to large backgrounds to avoid visible color banding on some screens.
Prefer the PNG on websites when it must match exactly. The CSS version uses radial gradients, which are close but not identical; it is tiny and scales to any screen.
Frequently asked questions
What is a mesh gradient?
A mesh gradient blends several colors placed at different points of an area, so colors flow in two dimensions instead of along one line. Design tools build them on a grid of colored points; this generator places free points and blends them with smooth weights, which gives the same soft, organic look.
How do I use a mesh gradient in CSS?
CSS has no native mesh gradient, so the export stacks one radial-gradient per color point on top of a base color. It looks very close to the canvas in most cases; for a pixel-perfect result, download the PNG and use it as a background-image.
Why do the colors look smoother than in other tools?
Colors are mixed in OKLab, a perceptual color space designed so that blends between two colors look even. Mixing in plain RGB tends to create dull gray or brownish zones between complementary colors such as blue and orange.
What does grain do?
Grain adds fine monochrome noise. It hides color banding on large screens, makes the gradient feel printed or photographic, and is a popular style for modern websites. Keep it at 5 to 15% for a subtle texture.
What is the maximum size?
Up to 8000 pixels per side and 40 megapixels in total, for example 7680 × 4320 (8K). Large images take a few seconds to render; the gradient is rendered in strips so the page stays responsive.
Can I use the gradients commercially?
Yes. The images are generated on your device from your own settings, so you can use them in any personal or commercial project without attribution.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.