Mesh Gradient Generator
Create a soft, multi-color mesh gradient using nothing but CSS. The tool layers several radial gradients over a base color, you control the palette and how many blobs blend together, then copy the background straight into your stylesheet.
How to make a CSS mesh gradient
- Build your palette: edit the color swatches, add or remove colors, or hit Randomize palette for a fresh set.
- Set the blob count to control how busy the mesh looks, then randomize the layout until you like the preview.
- Copy the generated CSS and paste the background-color and background rules onto any element.
Examples
Four-color mesh on a cyan base
colors: indigo, pink, cyan, amber, count: 4, seed: 42
background: radial-gradient(at 86% 67%, #ec4899, transparent 39%), radial-gradient(at 27% 63%, #22d3ee, transparent 57%), ...;
Frequently asked questions
What is a mesh gradient?
A mesh gradient blends several colors that fade into each other across a surface, instead of a single straight or circular fade. This tool fakes that look with pure CSS by stacking multiple radial gradients, each placed at a different spot and fading out to transparent, over a flat base color.
Is the generated mesh real CSS, or an image?
It is real CSS. The output is a background-color plus a background built from layered radial-gradient() functions, so there is no image to host, it stays crisp at any size and you can paste it onto any element.
Why does the same setup always give the same gradient?
The layout is driven by a seeded random number generator. The same palette, blob count and seed always produce the exact same CSS, so a gradient you like is reproducible and shareable. Randomizing simply picks a new seed.
Do mesh gradients work in every browser?
Yes. The output uses standard, unprefixed radial-gradient() syntax that every current browser supports, including Chrome, Firefox, Safari and Edge, so the copied code works without vendor prefixes or fallbacks.
How many colors and blobs should I use?
Two to five colors usually reads best, with a blob count near the number of colors for a balanced look or higher for a busier mesh. You can layer up to 24 blobs. Fewer, softer blobs feel calmer, while more blobs with tighter falloff feel more vivid.
Are my colors sent to a server?
No. The mesh is generated entirely in your browser as you edit, so your palette and settings never leave your device. Nothing is uploaded, logged or stored.
Related tools
CSS Gradient Generator
Build linear and radial CSS gradients with a live preview. Pick colors, set the angle and copy ready-to-paste background code for your site.
Color Palette Generator
Generate complementary, analogous, triadic, tetradic and monochromatic color palettes from one base color. Pick a hex, copy each shade as hex, RGB or HSL.
Box Shadow Generator
Build CSS box-shadow visually. Drag sliders for offset, blur, spread, color and opacity, see a live preview, and copy the box-shadow code.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
Aspect Ratio Calculator
Calculate aspect ratios fast. Enter a ratio like 16:9 and one dimension to get the other, or enter width and height to simplify the ratio.
Base58 Encoder
Encode and decode Base58 online with the Bitcoin alphabet. Convert text to Base58 or back, UTF-8 safe, no confusing 0 O I l. Runs in your browser.