Mesh gradient studio

Stack soft, oversized radial gradients—similar in spirit to polished product hero backgrounds. Start from a preset, dial in shape and color, lock a seed, then copy CSS (and HTML) that matches what you see—including optional grain and motion.

Pair with palettes: Random palette explorer Pixel doodle

Hats off to the flagship that inspired this page: Mesh Gradient Studiomeshgradientstudio.com (opens in new tab)—same maker; that site is the dedicated home for this kind of work.

Presets

Colors

Base fill

Blob 1

Blob 2

Blob 3

Blob 4

Color saturation 100%

Scales blob chroma before blending (base fill unchanged).

Shape & layers

Layers 6

Blob width (min %) 55

Blob width (max %) 97

Soft edge 68%

Where each radial fades to transparent.

Horizontal bias 0

Vertical bias 0

Shifts blob centers (positive = right / down).

Strength

Blob strength 0.35

Max opacity per layer.

Motion, grain & export

Hue motion range 14°

Animate preview (hue drift) Include motion in exported CSS Film grain in preview Film grain in exported CSS Minify copied CSS

CSS class name

Exported min-height

Randomness

Seed

Same seed + same settings = identical mesh. Leave empty to explore freely.

Use a dedicated background wrapper with no text inside if you export motion or grain—both use overlays that can affect descendants. Place copy in a sibling with position: relative; z-index: 1.

Generated code

How to use. Start from a preset, then adjust colors, blob positions, and options (grain, motion, etc.). The preview updates live—scroll to Copy CSS / HTML snippets that match what you see. Lock a seed to recreate the same look later.