Mesh Gradient Generator
Create trendy multi-colour mesh backgrounds as pure CSS.
Generate the soft, multi-colour mesh gradients trending across modern UIs — as pure, copy-ready CSS built from layered radial-gradients (no image to host). Tweak each colour and its position, adjust the softness, or hit Randomize for a fresh harmonious palette. Great for hero sections and app backgrounds. Runs fully in your browser — nothing is uploaded.
How to use Mesh Gradient Generator
Start with a palette
The generator opens on a harmonious set of colours. Hit Randomize any time to roll a fresh, good-looking palette using secure randomness.
Tune each colour
Click a swatch to open the colour picker or type a hex value, and add or remove colour points (2–8) to make the mesh richer or simpler.
Move the blobs
Drag each colour's X and Y sliders to reposition its soft blob anywhere on the canvas until the blend feels right.
Adjust softness
Use the Blob softness slider to control how far each colour spreads — lower for distinct pools, higher for a smooth, dreamy wash.
Copy the CSS
Click Copy CSS to grab the background rule (a base colour plus layered radial-gradients) and paste it straight into your stylesheet.
Frequently asked questions
What is a mesh gradient?
A mesh gradient is a soft, multi-colour background where several colours bleed into one another from different points, rather than the single straight line of a normal linear gradient. It gives that modern, dreamy, “aurora” look popular in landing pages and app UIs.
How does this work without an image?
The tool stacks several CSS radial-gradients — one soft blob per colour at its own position — over a solid base colour. Because it's plain CSS, there's no image to upload or host, it scales to any size without blurring, and it loads instantly.
Will it work in all browsers?
Yes. Layered radial-gradients and background-image are supported in every modern browser (Chrome, Edge, Firefox, Safari). The generated CSS uses no experimental features, so you can paste it straight into production.
How do I use it as a full-page background?
Apply the copied rule to a full-height element — for example set the CSS on body or a wrapper with min-height: 100vh. You can also add background-attachment: fixed for a parallax feel, or overlay content with a semi-transparent panel for readability.
Can I get the same random result again?
Randomize intentionally uses secure randomness, so exact palettes aren't reproducible by design. Once you find one you like, copy the CSS right away — the hex values and positions in the code fully capture that gradient.
Is anything uploaded?
No. Everything — colours, positions and the CSS — is generated in your browser. Nothing you create is sent to or stored on a server.
Related tools — Design · CSS generators
- CSS Box Shadow Generator — Design layered CSS box-shadows with a live preview.
- CSS Border Radius Generator — Round corners and craft organic blob shapes in CSS.
- Glassmorphism & Neumorphism Generator — Generate frosted-glass and soft-UI CSS effects.
- CSS clamp() / Fluid Typography Generator — Build responsive clamp() sizes that scale without media queries.
- CSS Flexbox / Grid Playground Generator — Visually build Flexbox & CSS Grid layouts and copy the code.
- Cubic-Bezier Easing Generator — Shape CSS easing curves by dragging handles, with a live preview.
- Blob & Wave SVG Generator — Generate organic blob shapes & hero-section waves as SVG.