Smooth Gradients

Detailed Overview

Smooth Gradients brings your website to life with beautiful, fluid, animated color gradients. Featuring 10 carefully designed color palettes, smooth transitions, and subtle grain texture, it creates visually rich backgrounds that add depth and personality to any design.

Customize the animation speed, grain intensity, grain size, corner radius, and color palette directly from Framer's property controls. You can also show or hide the built-in palette picker, allowing visitors to explore different gradient styles interactively or use a fixed palette for a consistent design.

Powered by WebGL, Smooth Gradients delivers fluid color animations without requiring external libraries, making it a versatile choice for modern websites, landing pages, and creative projects.

Key Features

• 10 Color Palettes: Choose from 10 preset gradient combinations.

• Smooth Animations: Enjoy fluid, continuously moving color transitions.

• Customizable Speed: Adjust the animation speed to match your design.

• Grain Texture: Add subtle noise for a more refined visual appearance.

• Adjustable Grain Size: Control the size of the grain texture.

• Interactive Palette Picker: Let visitors switch between gradient palettes.

• Show or Hide Picker: Enable or disable the palette picker from property controls.

• Easy Customization: Configure the palette and visual settings directly in Framer.

• Adjustable Corner Radius: Create sharp or rounded gradient backgrounds.

• WebGL Rendering: Enjoy animated gradients powered by WebGL.

Best For

• SaaS landing pages

• Hero sections and website backgrounds

• Creative portfolios

• Agency websites

• Product showcases

• Modern UI designs

• Abstract visual sections

• Framer templates and design projects