Motion Gradients

Detailed Overview

Motion Gradients is a WebGL-powered animated gradient component for Framer, featuring 10 carefully designed gradient presets with smooth, continuously moving color transitions. Each gradient combines four color stops with animated wave patterns to create rich, organic visual movement.

Choose from 10 unique gradient styles, including Velvet Gold, Rainforest Gold, Terracotta Bloom, Harvest Moon, Pomegranate Dusk, Olive Dusk, Aegean Sunrise, Orchid Ember, Ember Clay, and Mauve Parchment.

With adjustable animation speed, grain intensity, opacity, and an optional in-canvas gradient picker, Motion Gradients gives you an easy way to create dynamic and atmospheric backgrounds for your Framer websites.

Key Features

• 10 Gradient Presets — Choose from 10 unique animated gradient styles.

• WebGL Powered — Uses WebGL shaders for smooth real-time rendering.

• Four-Color Blending — Each gradient combines four color stops for layered transitions.

• Animated Color Waves — Sine and cosine waves create continuous organic movement.

• Adjustable Speed — Control the animation speed to match your design.

• Grain Control — Add procedural grain for a subtle textured appearance.

• Opacity Control — Adjust the overall gradient opacity.

• Gradient Picker — Optionally enable an in-canvas dropdown to switch between presets.

• Responsive Rendering — Automatically adapts to the component's size.

Best For

• Hero section backgrounds

• Landing pages

• Portfolio websites

• Creative agency websites

• SaaS and startup websites

• Product showcases

• Abstract visual sections

• Full-screen backgrounds

• Interactive website sections

• Modern Framer websites