BuildUtilities

CSS Mesh Gradient Generator – Free Online Tool

Layer multiple radial gradients into a soft mesh background and copy the CSS. Drag colour points to position them.

✦ FreeNo SignupInstantCSS

Click the canvas to add a colour point, drag a point to move it.

#7c3aed20,25
#0bbcb778,20
#f43f5e30,80
#f59e0b82,75
background-color: #0a0a1a;
background-image:
  radial-gradient(circle at 20% 25%, rgba(124,58,237,0.85) 0%, transparent 55%),
  radial-gradient(circle at 78% 20%, rgba(11,188,183,0.8) 0%, transparent 50%),
  radial-gradient(circle at 30% 80%, rgba(244,63,94,0.75) 0%, transparent 55%),
  radial-gradient(circle at 82% 75%, rgba(245,158,11,0.7) 0%, transparent 45%);

Want animation, blend modes and PNG export?

This generator does one thing: layered CSS radial gradients you can paste straight into a stylesheet. For 11 rendering styles, multi-layer compositing, real-time WebGL animation and export to PNG, CSS or GLSL, use the full studio.

Open Mesh Gradient Studio

Example

Input

4 colour points on a #0a0a1a background

Output

background-image: radial-gradient(circle at 20% 25%, rgba(124,58,237,0.85) 0%, transparent 55%), …

Each point becomes one radial-gradient layer, positioned with `circle at x% y%` and fading to transparent.

How to Use CSS Mesh Gradient Generator

  1. 1

    Add Points

    Click anywhere on the canvas to drop a colour point.

  2. 2

    Position Them

    Drag a point to move it, and adjust its colour, radius and opacity.

  3. 3

    Copy CSS

    Copy the layered radial-gradient CSS into your stylesheet.

Common Use Cases

  • ✦Building soft hero section backgrounds
  • ✦Adding depth behind landing page copy
  • ✦Creating branded gradient cards

Share

Share a link to this tool. Results can be passed via URL parameters.

https://buildutilities.com/share/css-mesh-gradient-generator

Frequently Asked Questions

More CSS Tools

Visual CSS generators with live preview and copy-paste output.

▢ CSS Box Shadow Generator▧ CSS Gradient Generator⬚ CSS Flexbox Playground▦ CSS Grid Generator◰ CSS Border Radius Generator↔F CSS Clamp Generator
View all CSS tools
Tip Jar