Mesh Gradient Generator

Mesh gradient preview

Points

Drag the colored dots on the canvas to reposition. Click + to add more.

Point 1

Color#f53d99Position X20%Position Y20%Spread60%Alpha80

Point 2

Color#25d1f4Position X80%Position Y30%Spread55%Alpha80

Point 3

Color#8c30e8Position X50%Position Y80%Spread65%Alpha75

Point 4

Color#13ec80Position X15%Position Y75%Spread50%Alpha70

Surface

Background#09090bBlur0pxOpacity100%

Minified

.mesh-gradient {
  background-color: #09090b;
  background-image: radial-gradient(circle at 20% 20%, hsl(330 90% 60% / 0.8) 0%, transparent 60%), radial-gradient(circle at 80% 30%, hsl(190 90% 55% / 0.8) 0%, transparent 55%), radial-gradient(circle at 50% 80%, hsl(270 80% 55% / 0.75) 0%, transparent 65%), radial-gradient(circle at 15% 75%, hsl(150 85% 50% / 0.7) 0%, transparent 50%);
}