Open source and production ready
Make your gradients come alive
A tiny (<1kB) React library that makes linear gradient animations ridiculously easy. No fuss, just beautiful transitions.
Try it out
Click the color swatches to see smooth transitions in action
🌊
Ocean Breeze
Click a color to animate the transition
Why you'll love it
Built for developers who care about the details
⚡
Blazingly Fast
Pure CSS animation powered by Houdini. SSR ready.
🪶
Featherweight
Lightweight and standalone. No external animation libraries required.
🎨
Fully Customizable
Control colors, duration, angle and easing. Support for any CSS color format (including OKLCH).
🛡️
TypeScript Ready
Built with TypeScript for excellent developer experience and type safety.
Dead simple API
Copy, paste, and watch the magic happen
import { AnimatedLinearGradient } from "react-animated-linear-gradient";
export const UncontrolledExample = () => {
return (
<AnimatedLinearGradient
linearGradients={[['red', 'blue'], ['green', 'purple']]}
loop
style={{ width: 300, height: 300 }}
/>
);
};