Quick Start

INFO

GradLab requires WebGL support. Chrome, Firefox, Safari, and Edge all support WebGL by default on desktop and mobile.

1. Open GradLab

Navigate to gradlab.app in any modern browser. The canvas begins rendering immediately using one of three built-in presets. No sign-up required.

2. Choose a Preset

Three presets appear at the top of the control panel. Click any to load a full configuration — colors, flow algorithm, and post-processing included.

Use presets as a starting point, not a final result. Every parameter is editable after loading.

3. Set Your Colors

In the Palette section, click any color swatch to open the color picker. You can:

• Type a hex code directly
• Drag swatches to reorder the blend sequence
• Click the image icon to extract colors from a photo
• Add up to 8 colors, remove down to 2

Colors blend in OKLCH by default; you can also choose RGB or OKLAB.

4. Pick a Flow Algorithm

Open Shape & Flow and choose one of 13 algorithms from the dropdown. Each defines the underlying motion structure:

• Sin/Cos (Classic) — smooth periodic waves, a reliable starting point
• Smooth Noise — organic noise-based motion
• Radial Topography (Rings) — concentric rings radiating from center
• Nested SDF Shape (Core Glow) — geometric glow from a signed-distance field shape

Use the Speed, Zoom, Liquid, and Morph sliders to fine-tune the motion feel.

5. Adjust Post-Processing (Optional)

In the Post-Processing panel you can add:

• Film Grain — analog texture over the gradient The preview also tilts slightly with mouse movement. There is no separate tilt control; PNG/MP4 do not include this CSS transform.

6. Export

When the canvas looks right, choose your format:

Button	Output
Download Frame	PNG screenshot at full resolution
Record MP4	Set the duration, then render a fixed 30 fps high-quality MP4
Export Code	Self-contained HTML file you can embed anywhere

TIP

Enable Ping-pong Loop before recording to get a seamlessly looping video — perfect for social media or UI backgrounds.