Tool

Gradient Mesh

Drop color points onto a live canvas and drag them into a soft, blurry aurora — the mesh gradient every hero section wants. Tune softness, base color, and film grain, then copy paste-ready CSS, an SVG, or a self-contained React component.

Presets

Points · 5

Drag points on the canvas, or edit them here. Arrow keys nudge a focused point; Delete removes it.

#0ea5e9 · 14%, 22%
#22d3ee · 80%, 16%
#10b981 · 28%, 80%
#8b5cf6 · 74%, 72%
#2563eb · 50%, 46%

Appearance

Softness64

Base color

#04141f

Film grainGrain10%

Preview

Aspect

Animate shimmer

.mesh-gradient {
  position: relative;
  background-color: #04141f;
  background-image:
    radial-gradient(80% 80% at 14% 22%, #0ea5e9 0%, rgba(14, 165, 233, 0) 100%),
    radial-gradient(80% 80% at 80% 16%, #22d3ee 0%, rgba(34, 211, 238, 0) 100%),
    radial-gradient(80% 80% at 28% 80%, #10b981 0%, rgba(16, 185, 129, 0) 100%),
    radial-gradient(80% 80% at 74% 72%, #8b5cf6 0%, rgba(139, 92, 246, 0) 100%),
    radial-gradient(80% 80% at 50% 46%, #2563eb 0%, rgba(37, 99, 235, 0) 100%);
}

.mesh-gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'140'%20height%3D'140'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.85'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%2F%3E%3C%2Fsvg%3E");
  opacity: 0.1;
  mix-blend-mode: overlay;
}