CONTENTS:Radial Gradient Card

Radial Gradient Card

A sleek container component that tracks pointer movements across its surface to drive a hardware-accelerated CSS radial gradient. Delivers an atmospheric, subtle illumination effect that elevates cards and dashboards without heavy re-renders.

Dependencies:

framer-motiontailwind-merge

Loading preview...

Examples

Select a preset to load into preview

Installation

pnpm add framer-motion tailwind-merge

Props

Property	Type	Default	Description
`radialGradient`	`RadialGradientConfig`	`{}`	Options object containing color1, color2, shape ('circle' \| 'ellipse'), size, and opacity.
`className`	`string`	`undefined`	Tailwind CSS classes for styling the outer card border, background, and padding.
`children`req	`React.ReactNode`	`-`	Content rendered within the illuminated card container.