lighting border sweep premium card premium CTA buttons pricing highlights cards that need motion without full glow borders look static and dead need moving light without repainting the whole card want a more luxury CTA treatment
Light Sweep Border
Fetch snippet JSON:
curl https://webspire.de/snippets/lighting/light-sweep-border.json Lighting
Light Sweep Border
A moving perimeter highlight works well for premium cards, CTAs and selected states.
Background
Customize
Quick Start
<button class="light-sweep-border rounded-2xl px-6 py-4 text-white">Upgrade</button>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 971 bytes · 43 lines
- Custom Properties
-
--sweep-surface--sweep-color--sweep-speed - Classes
-
.light-sweep-border
lighting border sweep premium card
This effect keeps the surface stable and moves the light along the perimeter instead. It works well when you want polish without turning the whole component into a glowing blob.