Mesh Gradient Playground

Interactive playground to experiment with colors, animation speed, frequency, and generated options.

#8a519a

#6101c1

#e24097

#f3121d

Tap color badge to open picker. Tap line under badge to toggle visibility.

Preset

SeedrandomAnimation speedx1Frequencydefault

Frequency also supports granular control over x/y/delta. See API reference.

Output configuration:

import { type MeshGradientOptions } from '@mesh-gradient/core';const options: MeshGradientOptions = {  colors: [    "#8a519a",    "#6101c1",    "#e24097",    "#f3121d"  ]};

You can paste this configuration into any MeshGradient instance. See full list in API reference.

Use the examples in Quick Start and API for implementation details.