Mesh Gradient

Animated gradient with real grain

Most gradient components on this marketplace are static CSS. This one moves. Two to eight colour fields drift over one another on paths that never repeat, so the eye never catches a loop. A film grain layer sits on top — generated in the browser, so it costs nothing to download and never tiles visibly. A vignette closes the corners. Everything is adjustable from the property panel: colours, number of fields, spread, speed, blur, contrast, grain amount and size, vignette. The gradient canvas renders at low resolution behind the blur, which is why it stays smooth on a full-screen hero. Set the cursor reaction to zero and the background becomes fully autonomous. Canvas 2D, no dependencies, nothing loaded from outside. Honours prefers-reduced-motion, and freezes on a still frame inside the Framer canvas so your editor stays responsive.

Animated gradient with real grain