#What is Product?

Animated Gradient BG is a Framer Component, a powerful visual component designed for Framer creators who want to add vibrant, animated gradient backgrounds to their websites without writing code. It enables designers, developers, and startups to build visually engaging hero sections and landing pages using customizable color blobs, motion patterns, and blend effects. With built-in performance optimization and mobile interactions, it’s ideal for modern product sites, SaaS landing pages, and interactive web experiences.

#Features ⚡

• Customizable Gradient Blobs: Create up to 8 gradient blobs with individual colors, sizes, and adjustable gradient stops for precise visual control.

• Multiple Motion Modes: Choose from 6 animation modes including Orbit, Organic, Lissajous, Figure8, Random, and automatic mode switching.

• Interactive Effects: Includes hover tracking with overscan, scroll-based motion, pulse-on-tap interaction, and mobile gyro support.

• Advanced Blend Modes: Access 17 blend modes such as screen, overlay, and plus-lighter to produce unique layered gradient effects.

• Appearance Controls: Adjust blur, brightness, radius, grain texture, and base background color for refined visuals.

• Performance Optimization: Automatically adjusts rendering quality, pauses when off-screen, and supports reduced motion preferences for accessibility.

#Included Components

This component package provides ready-to-use animated background functionality for Framer projects.

• Animated Gradient Background component

• Gradient blob color and size controller

• Motion mode controller with multiple animation presets

• Hover and interaction configuration settings

• Appearance customization panel for blur, grain, brightness, and base color

#Pricing 💸

Animated Gradient BG follows a simple pricing model and is accessible to all Framer users.

• Free: Full access to the animated gradient background component with customization options and motion modes.

#Integrations 🧰

Designed specifically for the Framer ecosystem and easily integrates with modern Framer projects.

• Framer

• Framer landing pages and hero sections

• Framer interactive website designs