Gradients Switcher

Gradient Switcher is a WebGL-powered animated gradient component for Framer, featuring 10 vibrant color presets with smooth, continuously shifting transitions. Switch between colors like Lime, Electric Blue, Hot Pink, Sunset Orange, Violet, Aqua, Crimson, Gold, Mint, and Ice using an interactive dropdown picker.

Customize the animation speed, gradient curve, softness, black intensity, and corner radius to match your design.

Key Features

• 10 Gradient Presets: Choose from 10 vibrant color combinations.

• Interactive Color Switcher: Switch between gradient styles using a dropdown with color indicators and names.

• Smooth Animation: Enjoy continuously moving and rotating gradient transitions powered by WebGL.

• Customizable Appearance: Adjust black intensity, curve, softness, animation speed, and corner radius.

• Flexible Picker Position: Place the gradient selector in any of the four corners.

• Performance Optimized: Animation runs only while the component is visible in the viewport.

Best For

• SaaS and startup landing pages

• Hero sections and website backgrounds

• Portfolio and creative agency websites

• Modern dashboards and product interfaces

• Backgrounds for cards and feature sections

• Interactive visual experiences

• Websites that need vibrant, animated color effects