Design & Web Fun

Mesh Gradient Generator

Craft trendy, multi-colored fluid CSS mesh gradients for hero banners and card backdrops.

Presets & Shuffle

Gradient Nodes (4 Points)

X: 20%

Y: 30%

Spread: 70%

X: 80%

Y: 20%

Spread: 60%

X: 70%

Y: 80%

Spread: 65%

X: 15%

Y: 85%

Spread: 55%

CSS Code

background-color: #0f172a;
background-image: 
  radial-gradient(circle at 20% 30%, #7928ca 0px, transparent 70%),
  radial-gradient(circle at 80% 20%, #ff0080 0px, transparent 60%),
  radial-gradient(circle at 70% 80%, #0070f3 0px, transparent 65%),
  radial-gradient(circle at 15% 85%, #00dfd8 0px, transparent 55%);

Interactive Preview

Pure client-side CSS. No external image assets or heavy canvas renders required.