Background Gradient

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

Background Effectsgradienthovergradientglowwrapperinteractivebackground

Background Gradient

Background Gradient

Animated glow wrapper for premium cards

Use this component to frame cards, call-to-action blocks, and content panels with a soft animated glow while keeping all text highly readable on a clean inner surface.

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

Installation