5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T11bb,

ColorFlow is a powerful mesh gradient editor built as a Framer 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 Framer workflow, for free.

Advanced Mesh Editor

Most 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 Framer 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 canvas
Pull bezier handles to shape curves with precision
Split the grid using a dedicated Add Line tool
Switch between Rectangle and Circle topology
Fix edges to keep corners locked and clean
Adjust grid size from 2×2 up to 5×5 and beyond
Smart Actions — align, distribute, minimize, maximize, and set handles perpendicular in one click
Space points evenly across the mesh automatically
RGB, OKLab, and LCH color interpolation modes
Per-point color picker for full color control
Export up to 4000×3000 px resolution

8 Built-in Shader Effects

A 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 glass
Film Grain — adds organic texture and a tactile, printed feel
Chromatic Aberration — splits color channels for a prismatic edge glow
Progressive Blur — directional softness with adjustable start and end points
Halftone — breaks the gradient into a retro dot pattern
Pixelation — reduces detail into bold, chunky pixels
Watercolor — softens edges for a hand-painted look
VHS — scanlines, noise, and color bleeding for a lo-fi aesthetic

Animation

Procedural Animation with full control over point movement, handle oscillation, hue, saturation, lightness, duration, speed, and easing

Randomness slider for organic, unpredictable motion

Looped animations with seamless infinite playback

Interactive mode — gradient reacts to mouse movement

Smooth 60fps rendering powered by WebGL

Embed anywhere via iframe — Figma Sites, Framer, Webflow, or plain HTML

4K video export for social media, presentations, and reels

Completely 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.

5a:[["$","$L5d",null,{"post":{"id":"019d257f-bbd4-70da-a346-7fc28de5d6b5","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2638868a-d8a0-4e61-ab54-3941e895d340","name":"Ruslan Latypov","slug":"ruslan-latypov","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/29346/200x200-2wJPQpHwX5QQb7dGEg7Ftcg7edvPbv.png","followed":false,"followsYou":false},"media":[],"resources":[{"id":"954","resolved":true,"title":"ColorFlow — Mesh Gradient","body":"$5e","bodyJson":null,"introduction":"ColorFlow, Mesh Gradients","slug":"colorflow-mesh-gradient","author":{"framerUserId":"2638868a-d8a0-4e61-ab54-3941e895d340","name":"Ruslan Latypov","slug":"ruslan-latypov","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/29346/200x200-2wJPQpHwX5QQb7dGEg7Ftcg7edvPbv.png","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/954-2KXd4UFM3K9KY1yrqrCKLlYxCm5mFo","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/954-bDX2GsRBSuGHygnECSfpw2JMuKt4DX","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/954-ZFj6mGQa1WLdAh1oanxYlbBrzXg5Db","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/954-4OIeSJjsJgmclZywaP5y83rp4Q7OTF","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-23T17:45:09.693Z","updatedAt":"2026-03-23T18:42:36.254Z","publishedAt":"2026-03-25T14:57:01.396Z","featuredAt":null,"approvedAt":null,"type":"plugin","attributes":{"framerPluginId":"fo0u6wnjzf50y42jnn0182cih","paid":false,"categories":[{"id":"676f63da-b192-4974-930d-73185802088a","name":"Media","slug":"media"}],"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":24,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-03-25T14:57:01.396Z","updatedAt":"2026-03-25T14:57:01.396Z","reported":false}}],"$L5f"]

Suggested for you