RibbonwashFlowing gradients for the web
Draw a few Bézier curves, set their colors, and watch them move. Ribbonwash turns them into a living mesh-gradient background you can drop into any website — as an HTML snippet or a React component, in about 15 KB gzipped.
Features
Color that moves along a line
Most gradient tools give you a still image. Ribbonwash is built around motion: every curve carries its colors along its path, and every animation loops seamlessly.
Eight kinds of motion
Flow, back-and-forth, breathing, color rotation, comet trails, drifting ribbons and ripples, plus Move, which glides or orbits the whole curve. Stack them freely on one curve.
Perfect loops, every time
Set one loop length for the whole piece and how many laps each curve takes. The first and last frame always match.
A curve list like your design tool's layers
Rename, hide, lock and set the strength of each curve.
Start fast
Presets, random palettes, and colors picked from any reference image.
For developers
Made for developers
- Export real code. A self-contained HTML snippet, a React component, or a full ZIP. No license check inside — it keeps working forever, even offline.
- Small and fast. About 15 KB of runtime, gzipped. Very soft background curves render at reduced resolution so you don't pay for pixels nobody sees.
- Graceful on weak devices. On slow devices the background quietly lowers its resolution; if a device really can't keep up, it settles on a still frame instead of stuttering.
- Also on npm.
npm install ribbonwash, MIT licensed.
<!-- exported from Ribbonwash: one div, one script -->
<div id="hero" style="position:absolute;inset:0"></div>
<script src="mesh-runtime.min.js"></script>
<script>
MeshRuntime.createMeshGradient(hero, scene, { poster });
</script>
// or in React — npm i ribbonwash
import { MeshGradientView } from 'ribbonwash/react';
<MeshGradientView scene={scene}
style={{ position: 'absolute', inset: 0 }} />Pricing
Free to design. $19 once to ship.
No subscription. One license for life, on up to 3 devices.
Free
- The full editor: ribbons, motions, palettes
- PNG / JPEG up to 1280 px, small watermark
- MP4 / WebM video up to 720p · 10 s, watermark
- JSON import / export, local saves
- Code export
Pro
- Full-resolution PNG / JPEG, no watermark
- MP4 / WebM up to 4K, any length, no watermark
- PNG sequence (ZIP) for video tools
- Code export: HTML, React, ready-to-host ZIP
- Exported code works forever, no license checks
| Compare | Free | Pro · $19 |
|---|---|---|
| Editor: drawing, motions, palettes, presets | ✓ | ✓ |
| Still images (PNG / JPEG) | ≤ 1280 px, watermark | Full resolution |
| MP4 / WebM video | ≤ 720p, ≤ 10 s, watermark | Up to 4K, any length |
| PNG sequence (ZIP) | — | ✓ |
| Code export (HTML, React, ZIP) | — | ✓ |
| JSON import / export, local saves | ✓ | ✓ |
Runtime on npm (ribbonwash, MIT) | ✓ | ✓ |
| Devices | — | 3 activations |
| Price | $0 | $19 once, lifetime |
FAQ
Questions
Do I need an account?
No. Your work is saved in your browser. Export JSON to back it up or move it to another computer.
What happens to my site if I stop paying?
Nothing — there's nothing to stop. Pro is a one-time purchase, and exported code never checks a license.
I lost my license key.
It's in your receipt email. You can also find it under "My Orders" at Lemon Squeezy, or use "Recover license key" in the editor.
Moving to a new computer?
Use "Deactivate on this device" first to free up one of your 3 activations.
Refunds?
Full refund within 14 days, no questions asked. See the refund policy.
Support: [email protected]
Make your hero section move.
Start free in the browser — no sign-up. Upgrade when you're ready to ship.