🎨 Dev

Mesh Gradient Generator

Create modern mesh gradients by combining multiple radial-gradients. Add, remove and drag points to compose vibrant backgrounds Stripe/Linear style. Everything in your browser.

Preview (drag a stop, or set its colour and x/y on the right)

Stops (colour / position)

Background colour Radius size (%) 50%

CSS

A mesh gradient with no image file

Mesh gradients give you vivid backgrounds that look like paint bleeding into paint. The trick is to stack several radial-gradient layers whose colours fade out to transparent over one solid base colour. Every stop becomes its own pool of colour.

No image, no WebGL, no JavaScript at runtime — plain CSS. It works in every modern browser. Everything runs in your browser.

Create vibrant mesh gradients

You've probably seen those colourful, fluid backgrounds that became a trademark of companies like Stripe and Linear. They're mesh gradients, and they give any screen a modern look. This generator recreates the effect by combining several radial gradients into a single composition.

Add, remove and drag the colour points to compose the background, blending tones until you reach that smooth, vibrant transition that defines the style. The flexibility is far greater than an ordinary linear gradient's, and the result comes out in CSS ready to paste into your project.

It all runs in the browser, with an immediate preview as you tweak. A no-fuss way to adopt one of the most-used background trends in today's sites and apps.

Frequently asked questions

Can I drag the colour stops directly on the preview?

No. Despite the crosshair cursor, the preview responds to neither clicks nor dragging: each stop's position is typed into the x and y boxes in the list beside it, as a percentage of width and height. The first stop of the Sunset preset, for instance, sits at x 20 and y 25. Any value outside the 0 to 100 range is clamped to the nearest limit, and the preview redraws on every keystroke.

What does the radius size slider actually change?

It sets how far each colour travels before fading out. Every stop becomes a radial-gradient with your colour at 0% and transparent at the slider's percentage, which starts at 50%. Low values leave separate blobs with the base colour showing between them; high values make the circles overlap, and that overlap is where the smooth blend of the style comes from. There is one slider and it governs every stop at once.

Does the Remove last button delete the stop I selected?

No, it always drops the last one in the list and stops once a single stop remains. Add creates a stop at a random position with a colour drawn from a fixed palette of six; Random throws away what you have and rolls 4 to 6 fresh stops. The three presets replace everything too, background colour included. There is no undo, so copy the CSS before clicking any of them if the current composition matters.

Related Tools

🌈

CSS Gradient Generator

Create linear and radial CSS gradients with real-time preview. Adjust colors, positions and angle. Copy the CSS code with one click.

🔘

CSS Button Generator

Create custom CSS buttons: color, text, padding, border-radius, shadow and hover. Live preview and ready-to-copy HTML+CSS. Everything in your browser.

🪟

CSS Glassmorphism Generator

Create frosted-glass effects with backdrop-filter, transparency and borders. Adjust blur, saturation and opacity. Live preview and copy-ready CSS. Everything in your browser.

🟢

CSS Neumorphism Generator

Create Soft UI (neumorphism) effects with two complementary box-shadows. Adjust base color, distance, blur and type (raised, flat, pressed). Copy ready CSS. Everything in your browser.

🌑

CSS Box Shadow Generator

Create CSS box shadows with real-time preview. Configure multiple shadow layers, color, blur, spread and inset. Copy the CSS code.

🎯

Focus-Visible CSS Snippet

Builds a ready-to-paste :focus-visible rule from an outline colour and a thickness in pixels, with 2px offset, for the WCAG 2.4.7 focus indicator.