shine sweep hover light reflection polish polished hover effect on buttons light sweep on product cards shine reflection on images hover states need more visual feedback want light sweep without JS animation need polished shiny effect on elements
Shine Sweep
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/shine-sweep.json
Shine sweep
Specular pass
Card surface
A light streak travels across the plane on hover.
Background
Customize
Quick Start
<button class="shine-sweep bg-indigo-600 px-4 py-2 text-white rounded-lg">Hover me</button>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 662 bytes · 34 lines
- Custom Properties
-
--shine-color--shine-speed - Classes
-
.shine-sweep
shine sweep hover light reflection polish
A diagonal light streak that sweeps across the element on hover. Works on any element — buttons, cards, images. The sweep runs once per hover.
Shiny button
<button class="shine-sweep bg-indigo-600 px-6 py-3 text-sm font-semibold text-white rounded-xl hover:bg-indigo-500 transition">
Get started
</button>