React-animated-color-background NPM

Get started

🐇 Quick start

Install react-animated-color-background with via your package manager:

npm install react-animated-color-background

Then import the GradientBackground component:

import { GradientBackground } from "react-animated-color-background"

export const MyComponent = () => (
    <div style={{width: 600, height: 400}}>
        <GradientBackground colors={["#111111", "#222222", "#333333", "#444444"]} className={"class"}/>
    </div>
)

You can use the colors prop to define the colors of the gradient. You can also use the className prop to define a custom class for the div the animated gradient is in. The component will automatically adjust to the size of the parent element. The colors prop can have up to 4 colors.