Background Gradient — React Component

Animated gradient wrapper with soft glow and blur for cards, buttons, and hero sections.

Background Effectsgradienthovergradientglowwrapperinteractivebackground

Background Gradient

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

containerClassName

Class names for the inner content container.

surfaceClassName

Optional class names for the inner surface layer (inside gradient shell).

animationSpeed

Speed multiplier for looping gradient motion.

blur

Blur intensity in pixels for glow softness.

borderRadius

Wrapper border radius (e.g. "1rem", "24px").

Semantic root element variant.

interactive

Enables hover boost and cursor-follow glow.

disabled

Disables press interaction when used as button.

Generated JSX

Copy this into your page.

<BackgroundGradient
  containerClassName=""
  surfaceClassName=""
  animationSpeed={1}
  blur={24}
  borderRadius="1rem"
  as="div"
  interactive={true}
  disabled={false}
/>

Animation effects

gradienthover

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

Full-page demo

About Background Gradient

The Background Gradient component renders an animated radial or mesh gradient that shifts colors on a timer using CSS keyframe animation. Gradient stops, colors, position, and animation speed are configurable via props. Works as a hero section background, card fill, or full-page backdrop. Because the animation runs with CSS rather than JavaScript, it has no performance impact on React render cycles or scroll event handling.

Common use cases

Hero section animated backgrounds
Card and panel background fills
Section backdrop color effects
Promotional and campaign page backgrounds

Installation