·+·+·+·+·+·+·+·+·+·+·+·+·+·+·+·+

Animated gradients,
crafted visually.

A WebGL-powered editor for creating mesh gradients, layered effects, and exportable motion — all in the browser.

No account · Free · Open source
░▒▓█▓▒░░▒▓█▓▒░
▒▓█▓▒░░▒▓█▓▒░░
▓█▓▒░░▒▓█▓▒░░▒
█▓▒░░▒▓█▓▒░░▒▓
▓▒░░▒▓█▓▒░░▒▓█
▒░░▒▓█▓▒░░▒▓█▓
░░▒▓█▓▒░░▒▓█▓▒
░▒▓█▓▒░░▒▓█▓▒░
60fps
GPU-rendered
20+
Effects
8
Export formats
0
Signups needed
Capabilities

Everything you need to create
and ship visual effects.

Gradient Engine█▓▒░

Five modes, one shader

Mesh, radial, linear, conic, and plasma gradients — all GPU-rendered in a single WebGL 2 fragment shader at 60fps.

Layer System╔═══╗

Stack and blend

Up to 4 layers with blend modes — normal, multiply, screen, overlay, add. Each layer has independent parameters.

Effects Pipeline.:*#@

Dither. ASCII. Bloom.

Film grain, noise overlay, chromatic aberration, particles, pixel sorting, reaction-diffusion — all in the shader.

Mouse Physics~≈≋~

Reactive to touch

Fluid displacement, ripple waves, vortex swirl. Three physics modes that respond to cursor position and velocity.

Timeline▸▸▸▸

Keyframe anything

Animate any parameter over time. Loop, bounce, or one-shot playback with precise keyframe control.

Export→⤓↗

Ship it anywhere

PNG, CSS, Tailwind config, WebM video, React component, Web Component, iframe embed, or shareable URL.


    .  ·  ˙  ·  .     .  ·  ˙  ·  .     .  ·  ˙  ·  .
 ·  ˙  ·  .     .  ·  ˙  ·  .     .  ·  ˙  ·  .     .
˙  ·  .     .  ·  ˙  ·  .     .  ·  ˙  ·  .     .  ·  ˙
 ·  .     .  ·  ˙  ·  .     .  ·  ˙  ·  .     .  ·  ˙  ·
.     .  ·  ˙  ·  .     .  ·  ˙  ·  .     .  ·  ˙  ·  .
   .  ·  ˙  ·  .     .  ·  ˙  ·  .     .  ·  ˙  ·  .
Workflow

Create → Effect → Export

01░░▒▒▓▓██

Pick a gradient mode

Choose mesh, radial, linear, conic, or plasma. Adjust colors, speed, complexity, and scale with real-time preview.

02.:=+*#%@

Layer effects

Stack noise, bloom, dither, ASCII, chromatic aberration, particles, and more. Each effect has fine-grained controls.

03→ → → →

Export anywhere

Grab a PNG, copy CSS, download WebM video, generate a React component, or share a URL. One click.

▓▒░  ░▒▓█▓▒░  ░▒▓

Start creating.

No signup, no install, no paywall. Open the editor and start building animated gradients in seconds.