shine border conic-gradient property hover premium animated-border premium card hover with animated border CTA button border highlight dashboard tile focus indicator feature card emphasis on hover static borders feel lifeless on dark backgrounds need animated gradient border without heavy JS want @property showcased with a real use case
Shine Border
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/shine-border.json Preview
Background
Customize
Quick Start
<div class="shine-border p-8 text-white"><h3 class="text-lg font-bold">Pro Plan</h3><p class="mt-1 text-sm text-white/60">Hover to reveal border</p></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 929 bytes · 45 lines
- Custom Properties
-
--shine-angle--shine-color--shine-bg--shine-duration--shine-radius - Classes
-
.shine-border
shine border conic-gradient property hover premium animated-border
A rotating conic-gradient border powered by @property. The --shine-angle custom property is registered as an <angle> type, which lets the browser interpolate it inside conic-gradient() — something that’s impossible without @property.
Shine card
<div class="shine-border p-8 text-white">
<h3 class="text-lg font-bold">Pro Plan</h3>
<p class="mt-1 text-sm text-white/60">Hover to reveal the border</p>
</div>Customize
Override custom properties to adapt to any palette:
.shine-border {
--shine-color: oklch(0.85 0.25 60); /* gold */
--shine-bg: oklch(0.08 0.01 60);
--shine-duration: 1.8s;
--shine-radius: 1rem;
}