design-infraReport a problem or share feedback← Catalog
Hover Border Gradient
curatedfreeaceternity/hover-border-gradient
A hover effect that expands to the entire container with a gradient border.
$
npx shadcn@latest add @aceternity/hover-border-gradientnpm deps: motion
Our notes
Gradient border that sweeps on hover — for a single standout CTA button.- Source
- Aceternity UI
- Kind
- component
- Categories
- background, card, button
- Use as
- wrapper — wraps your existing element
- Applies to
- button
- Motion
- on hover, loop · medium · motion · medium cost · ignores reduced motion
- Tags
- hover, utility
- Licence
- Free for unlimited personal & commercial projects; no redistributing as a competing library. Pro/All-Access is a one-time purchase.
- Live demo
- ui.aceternity.com
- Docs
- ui.aceternity.com
Similar
Compare all 4 →- Noise Backgroundaceternity/noise-backgroundAnimated gradient + noise texture. Works for editorial/brutalist when toned down.
- Background Gradientaceternity/background-gradientAn animated gradient that sits at the background of a card, button or anything.
- Moving Borderaceternity/moving-borderA border that moves around the container. Perfect for making your buttons stand out.