HoverBorderGradient
Border whose gradient rotates to follow cursor position around the element perimeter — revealed only on hover.
When to Use
- Call-to-action buttons where the cursor-aware border adds premium feel.
- Input or textarea focus rings with a gradient effect.
- Card borders that respond to cursor proximity without being always-on.
Card Title
Hover the card to see the rotating gradient border.
API Reference
HoverBorderGradient
| Property | Type | Default | Description |
|---|---|---|---|
| BorderRadius | int | 8 | Border radius in pixels. Match to the child element's border-radius. |
| DurationMs | int | 500 | Transition duration when the gradient fades in/out on hover. |
| ChildContent | RenderFragment? | null | Element wrapped by the gradient border. |
| Class | string? | null | Additional CSS classes. |
Related Components
- ShineBorder — Always-on perimeter shine animation.
- BorderBeam — Animated gradient beam traveling the border.
- MagicCard — Full card with cursor spotlight and 3D tilt.