Skip to main content
ToolsByUs

Mesh Gradient Generator

Create a static or animated mesh gradient from four radial patches. Adjust colors, positions and reach, then copy CSS or Tailwind, save an SVG, or download a PNG of the starting frame. Animation respects reduced-motion preferences.

Local-only

Presets

Pick a preset to set every control at once, then adjust from there.

Background color

Colors

Blob 1
Blob 2
Blob 3
Blob 4

Tip: drag the numbered handles on the preview to move each blob. Arrow keys nudge, Shift speeds up.

A preset sets every slider in one click; Shuffle does the same with random values.

CSS

.mesh {
  background-color: #070b1a;
  background-image:
    radial-gradient(ellipse 45% 45% at 88% 82%, #0ea5e9 0%, rgb(14 165 233 / 0.55) 70%, rgb(14 165 233 / 0) 100%),
    radial-gradient(ellipse 60% 60% at 42% 78%, #a855f7 0%, rgb(168 85 247 / 0.55) 70%, rgb(168 85 247 / 0) 100%),
    radial-gradient(ellipse 52% 52% at 74% 30%, #22d3a5 0%, rgb(34 211 165 / 0.55) 70%, rgb(34 211 165 / 0) 100%),
    radial-gradient(ellipse 58% 58% at 18% 22%, #5b8cff 0%, rgb(91 140 255 / 0.55) 70%, rgb(91 140 255 / 0) 100%);
  border-radius: 0px;
}

The CSS is layered radial gradients: one per blob, each fading to transparent, with the page colour underneath. That is why the seams never show — the blobs are not blended, they are stacked.

Tailwind classes

bg-[#070b1a] rounded-[0px] bg-[image:radial-gradient(ellipse_45%_45%_at_88%_82%,_#0ea5e9_0%,_rgb(14_165_233_/_0.55)_70%,_rgb(14_165_233_/_0)_100%),_radial-gradient(ellipse_60%_60%_at_42%_78%,_#a855f7_0%,_rgb(168_85_247_/_0.55)_70%,_rgb(168_85_247_/_0)_100%),_radial-gradient(ellipse_52%_52%_at_74%_30%,_#22d3a5_0%,_rgb(34_211_165_/_0.55)_70%,_rgb(34_211_165_/_0)_100%),_radial-gradient(ellipse_58%_58%_at_18%_22%,_#5b8cff_0%,_rgb(91_140_255_/_0.55)_70%,_rgb(91_140_255_/_0)_100%)]

Arbitrary values, so every number is exact — none of these are rounded to the nearest scale step.

How does Mesh Gradient Generator work?

Four radial gradients fade over a base color. Each patch uses an elliptical radius relative to the width and height of the element, with the same color at decreasing opacity. The SVG preview and CSS export share the positions, radii, stops and paint order; blob 4 is in front.

The base color and overlapping translucent layers affect the result. If a blend looks muddy, adjust the base, patch positions or reach. Standard CSS gradients interpolate alpha correctly; an explicit same-color transparent stop makes the generated values easy to inspect.

Enable animation for gentle alternating motion. The CSS registers percentage custom properties and animates the patch positions; animated SVG uses translations. Both include prefers-reduced-motion support. The PNG download is the starting frame. Animated Tailwind uses the .mesh rule and keyframes in the CSS export.

A preset sets the palette, positions, reach and corner radius and returns motion to its default. Check contrast before placing text over your design, and test animated backgrounds on the devices where you will use them.

Gradient settings

base    #0b0b12
blob 1  #5b8cff  at 18% 22%, reach 58%
blob 2  #22d3a5  at 74% 30%, reach 52%

Generated CSS

background-color: #0b0b12;
background-image:
  radial-gradient(at 18% 22%, #5b8cff 0px,
    rgb(91 140 255 / 0) 58%),
  radial-gradient(at 74% 30%, #22d3a5 0px,
    rgb(34 211 165 / 0) 52%);

What options and edge cases does Mesh Gradient Generator support?

What each control does
ParameterTypeDefaultBehaviour & edge cases
Blob position0–100%—Positions are percentages of the element width and height.
Reachpercentage58%The ellipse radii are percentages of each corresponding box dimension.
Base colourhex#070b1aThe base beneath the translucent patches affects the final blend.
Fade stoprgb() at alpha 0autoEach stop keeps its color while alpha decreases to zero.
Layer orderbottom to topblob 4 firstBlob 4 is in front in both SVG paint order and the CSS gradient list.
border-radiuspx0The radius clips the preview and is included in the exports.

Frequently asked questions

How do I make a mesh gradient in CSS?

Stack radial gradients over a base color. This generator uses four ellipses with controlled positions, reach and opacity stops, and gives you a complete .mesh rule.

Can I animate the gradient?

Yes. Enable Animate and choose a duration from 6 to 30 seconds. CSS animates registered percentage properties and SVG animates translations. Reduced-motion preferences disable motion. PNG is a still image of the starting frame.

Why does a blend look grey or muddy?

The base color and overlapping translucent layers affect the blend. Adjust the palette, base, patch positions or reach. CSS uses premultiplied alpha interpolation, so the transparent keyword does not inherently create a dirty black edge.

Does the CSS match the preview?

The two share ellipse geometry, color stops and layer order. The preview is SVG and the exported CSS is a stack of radial gradients, so rendering and color interpolation can vary slightly between engines.

Does the tool upload anything?

No. The controls and SVG, CSS and PNG generation run in the browser.

Will an animated gradient affect performance?

It can. Animated backgrounds need repainting, especially on large surfaces. Reduced-motion support is included, and static mode is available. Test the chosen size and speed on your target devices.

ToolsByUs team · How we check our tools