ColorFlow — Mesh Gradient Editor with Animation, Effects & Embed

About this plugin

ColorFlow is a powerful mesh gradient editor built as a Figma plugin. Design organic, fluid gradients with full control over every point and curve, then bring them to life with procedural animation, shader effects, and interactive embeds. Whether you're crafting a hero background, a brand asset, or an animated website element — ColorFlow gives you the tools to make it look exactly right.Mesh gradients are everywhere in modern design — from Apple's product pages to top SaaS landing pages, app splash screens, and editorial branding. Unlike simple linear or radial gradients, a mesh gradient uses a grid of color points, each influencing the surrounding area through smooth, organic curves. The result is that characteristic fluid, painterly color flow that feels handcrafted rather than generated. Creating mesh gradients has traditionally required expensive software like Adobe Illustrator or Vectornator — ColorFlow brings that same level of control directly into your Figma workflow, for free.Advanced Mesh EditorMost gradient tools give you two or three sliders and call it a day. ColorFlow is different. You get a full mesh editing environment — drag points, bend curves, split grid lines, and fine-tune every color transition with perceptually accurate blending modes. It's the level of control you'd expect from professional motion or 3D software, but right inside Figma and completely free.Mesh gradient editing in ColorFlow is built around bezier curve control — the same principle used in vector illustration. Every point on the mesh has handles you can pull independently, giving you precise control over how colors flow between nodes. Combined with modern color interpolation modes like OKLab and LCH, your gradients stay vibrant and accurate across the entire spectrum, with none of the muddy transitions you get from standard RGB blending.Drag control points to position colors anywhere on the canvasPull bezier handles to shape curves with precisionSplit the grid using a dedicated Add Line toolSwitch between Rectangle and Circle topologyFix edges to keep corners locked and cleanAdjust grid size from 2×2 up to 5×5 and beyondSmart Actions — align, distribute, minimize, maximize, and set handles perpendicular in one clickSpace points evenly across the mesh automaticallyRGB, OKLab, and LCH color interpolation modesPer-point color picker for full color controlExport up to 4000×3000 px resolution8 Built-in Shader EffectsA great gradient gets even better with the right finish. ColorFlow includes eight real-time WebGL shader effects you can stack directly on top of your mesh — non-destructive, fully adjustable, and rendered live as you tweak. From the tactile feel of film grain to the lo-fi nostalgia of VHS, every effect is designed to add character without compromising the quality of the underlying gradient.Glass Distortion — warps the gradient like light through frosted glassFilm Grain — adds organic texture and a tactile, printed feelChromatic Aberration — splits color channels for a prismatic edge glowProgressive Blur — directional softness with adjustable start and end pointsHalftone — breaks the gradient into a retro dot patternPixelation — reduces detail into bold, chunky pixelsWatercolor — softens edges for a hand-painted lookVHS — scanlines, noise, and color bleeding for a lo-fi aestheticBeyond FigmaStarts in Figma. Lives anywhere. ColorFlow isn't just a design tool — it's a creative engine for the web. Animate your gradient with procedural motion, make it react to cursor movement, and embed it live on any site with a single iframe. No video files, no heavy assets, no compromises. Just a smooth, living gradient that loads instantly and runs at 60fps.Procedural Animation with full control over point movement, handle oscillation, hue, saturation, lightness, duration, speed, and easingRandomness slider for organic, unpredictable motionLooped animations with seamless infinite playbackInteractive mode — gradient reacts to mouse movementSmooth 60fps rendering powered by WebGLEmbed anywhere via iframe — Figma Sites, Framer, Webflow, or plain HTML4K video export for social media, presentations, and reelsCompletely free. No limits. No signup.ColorFlow is free for personal and commercial use — no trials, no paywalls, no feature locks. We built it because great design tools shouldn't cost a fortune. Open it, make something beautiful, ship it anywhere.mesh gradient figma plugin, mesh gradient editor free, animated mesh gradient, figma gradient plugin, webgl gradient editor, embed gradient website, procedural animation figma, shader effects figma, mesh gradient generator, gradient background figma, colorflow figma