mask clip-path reveal card promo Tailwind promo cards with a stronger hover reveal category surfaces that need more motion than a simple background shift callout boxes or featured links with directional energy flat hover overlays lack shape and direction diagonal and radial reveals are too specific for everyday cards want a clip-path based reveal that stays easy to paste into Tailwind markup
Clip Slice Reveal
Fetch snippet JSON:
curl https://webspire.de/snippets/masks/clip-slice-reveal.json A shaped overlay opens across the card instead of fading in as a flat tint.
Background
Customize
Quick Start
<article class="clip-slice-reveal relative rounded-[1.25rem] border border-white/10 bg-slate-950/80 p-6 text-white">...</article>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 733 bytes · 29 lines
- Custom Properties
-
--clip-slice-from--clip-slice-to--clip-slice-duration - Classes
-
.clip-slice-reveal
mask clip-path reveal card promo
A more practical clip-path reveal for cards and promo surfaces. It gives you a clear directional hover state without turning the component into a full-blown animation piece.
Category card
<article class="clip-slice-reveal relative rounded-[1.25rem] border border-white/10 bg-slate-950/80 p-6 text-white">
<h3 class="text-xl font-semibold">Automation</h3>
<p class="mt-2 text-sm leading-6 text-white/70">Reveal a stronger accent layer on hover.</p>
</article>Adjust the reveal direction
<article
class="clip-slice-reveal relative rounded-[1.25rem] border border-white/10 bg-slate-950/80 p-6 text-white"
style="--clip-slice-from: inset(0 0 100% 0 round 1.25rem)"
>
...
</article>