Mesh Gradient Effect
A Framer mesh-gradient background with up to ten moving color spots, organic distortion and optional grain texture.
About Mesh Gradient Effect
Mesh Gradient Effect builds a shifting field of color from independently placed spots. Noise and swirl alter their flow, moving the result away from a static linear blend.
Motion speed can be reduced to zero and a specific frame selected for a still background. Scale, rotation and offset position the composition, while two grain treatments introduce texture either within the shapes or across the final image.
Component details
Creates a flowing multicolor mesh-gradient background.
Color spots move continuously, with speed, noise distortion and swirl controls.
Supports up to ten colors and a static freeze-frame mode when speed is zero.
Colors, distortion, swirl, grain mixer, grain overlay, scale, rotation and offset are editable.
Add the component to Framer, choose colors and adjust motion. The shader is powered by Paper Shaders.
Related components
View all
Built something worth finding?
Submit a site, template, component or tool built with any stack. We will add it to the atlas.