◐Gradients & backgrounds

Linear, radial and mesh gradients — background layers that fill the canvas on their own. Most shader backgrounds start here. — 10 entries

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Fill a canvas with a smooth color transition along a direction.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

A gradient that spreads outward from a center point.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Colors sweep in a full circle around a center point, like a color wheel.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

A gradient radiates from a center point in a diamond shape.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Soft color swaths drift across the canvas, with their seams wrapping through the palette.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Five individually placed color points blend together by proximity.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

A liquid-silk gradient with organic, flowing color bands.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

A directional gradient that cycles through rainbow colors or a custom set of three colors.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Fill the canvas with a single solid color.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

A studio-style background with multiple lights and ambient motion.