Holographic Sticker Peel
A 208 px round sticker, 9 px white rim and three-layer holographic face, whose top-right corner lifts on hover and peels three quarters of the way on click: two polygon clip-paths interpolated over 550 ms, a metallic “roll” sitting on the fold line, an aria-pressed state — all the visuals in CSS, twelve lines of JS for the toggle.
You'll get access to the interactive demo with a free account.
This effect is part of Effect.Labs — 811 vanilla effects, some free, some premium. Cards has 41 effects, including 6 free. Explore the category →
3 usage examples
How it works
.hsp-sticker is a 208 × 208 px button with no background. Three layers: ::after (z 0), a ground-shadow disc — box-shadow: 0 10px 24px rgba(0,0,0,.45), growing on hover (0 16px 34px .55) and offset on click (6px 30px 48px .65); .hsp-face (z 2), the sticker itself: border: 9px solid #fff, border-radius: 50%, and three background-images blended with background-blend-mode: screen, overlay, normal — a 118° specular streak (white at 55% around 47%), 104° micro-stripes (6 px period: 1 px white 9%, 1 px white 5%) and the iridescent base conic-gradient(from 210deg at 42% 36%, c1 … c5, c1) driven by five variables (--hsp-c1 cyan #62e6ff, pink #ff8ae1, yellow #ffe95c, violet #b18cff, green #7dffc4). The “−20%” motif is 2.5 rem / 900 in #14141c ink; the sub-line .68 rem uppercase at opacity .78.
The peel is a clip-path on the face, with three five-vertex polygons: rest (0 0, 100% 0, 100% 0, 100% 100%, 0 100%) — the duplicated vertex keeps the count constant, the condition for the browser to interpolate; hover and focus (0 0, 74% 0, 100% 26%, …); click (0 0, 26% 0, 100% 74%, …). Transition --hsp-dur: .55s with --hsp-ease: cubic-bezier(.32, 1.35, .46, 1) — the second control point at 1.35 overshoots the target by a few percent before settling, the snap of a real sticker. Measured geometry: on hover the diagonal runs 38 px from the corner while the disc's edge is 43 px from it — it only cuts 4.8 px into the white rim; the visible lift comes from the roll. On click, 27% of the disc's area disappears. [aria-pressed="true"] .hsp-face also plays hsp-tug (.28 s, scale(1.022, .985) at 38%), the glue stretch.
The roll: .hsp-flap-wrap (z 3, border-radius: 50%; overflow: hidden — it clips to the die-cut — and filter: drop-shadow(-4px 6px 7px .38)) holds .hsp-roll, a pill 170% wide rotated 45° (translate(-50%,-50%) rotate(45deg)) painted like a cylinder (#565b66 → #aab0bc → #fff 34% → #d9dde4 → #8f95a2 → #4e525d) and tinted with an iridescent gradient in overlay. Its center follows the fold line: rest left: 104%; top: -4% (outside the disc, opacity 0), hover 87% / 13% with height: 9% (19 px), click 63% / 37% with 15% (31 px) — always the midpoint of the current diagonal, opacity arriving in .25 s. Beyond the roll nothing is drawn: the page background shows through — the sticker is lifted, it has no back.
The script: for each .hsp-sticker, a click flips aria-pressed; a keydown listener on document puts every sticker back on Escape. That's all — hover is CSS. prefers-reduced-motion: reduce brings the three transitions down to .01 s and removes the stretch; prefers-reduced-transparency: reduce replaces the holo layers with flat greys (#b8bec9 face, #9aa0ab roll). The CSS also ships rules for .pv-product (a “product card” layout: 108 px sticker in position: absolute; top: -34px; right: -26px, 6 px rim, 1.3 rem motif) and .hsp-high-contrast (mirror of a demo toggle) — leftovers from the catalog page, matched by no element of the sold HTML.
Accessibility
- prefers-reduced-motion handled (.01 s transitions, stretch removed) and prefers-reduced-transparency handled (face and roll in flat greys) — both, which is rare in the catalog.
- Semantics: a
buttonwitharia-pressed, so a toggle button announced as such; Enter and Space peel, Escape puts it back. But the face isaria-hidden: “−20% Summer Deal” is never read, only the shippedaria-label(in French, describing the gesture) is. Put the offer in the label:aria-label="Sticker −20%, summer deal — activate to peel it off". - Contrast measured (Chromium, pixels under the text, holo face at rest): motif
#14141c40 px on the face = 8.7:1 at minimum (AAA); sub-line#14141cat opacity .78, 10.9 px = 11.7:1 at minimum. Dark ink on light pastels: the right choice, no color to change — even on violet#b18cff, the darkest of the five, the motif holds 7:1. - Focus:
:focus-visibledrawsoutline: 3px solid #a855f7at 8 px withborder-radius: 50%— the ring follows the disc — and lifts the corner like hover (:focus-visible .hsp-face,.hsp-roll). - Touch: a tap = click = peeled; the “lifted corner” preview doesn't exist under a finger, the sticker goes straight to the peeled state. On iOS
:hoversticks after the tap, but the click rule, declared later, wins. Target 208 px;-webkit-tap-highlight-color: transparentremoves the grey flash. The Escape listener is global: it also resets stickers belonging to other components on the page.
Browser compatibility
Requires interpolated clip-path: polygon(), conic-gradient(), background-blend-mode, filter: drop-shadow() and CSS variables. The prefers-reduced-transparency media queries are simply ignored by browsers that don't know them. ES5 JavaScript, zero dependencies.
Without JavaScript, hover and focus still lift the corner, but nothing peels the sticker. Without conic-gradient, the whole background-image declaration is invalid: the disc keeps only its white rim — add background-color: #b8bec9 (the reduced-transparency fallback color). Without clip-path transitions, states jump at once.
The code
HTML structure to paste into your page (CSS + JS available with a premium account):
<button class="hsp-sticker" id="hspDemo" type="button" aria-pressed="false" aria-label="Holographic sticker — hover to lift the corner, activate to peel it off">
<span class="hsp-flap-wrap" aria-hidden="true">
<span class="hsp-roll"></span>
</span>
<span class="hsp-face" aria-hidden="true">
<span class="hsp-motif">-20%</span>
<span class="hsp-motif-sub">Summer Deal</span>
</span>
</button>Full HTML + CSS + JS, copy-paste ready — with hundreds of premium effects.
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
| Polygons (CSS — .hsp-face clip-path, three states) | 74% / 26% on hover, 26% / 74% on click | Where the fold line runs. Points 2 and 3 stay on the top and right edges; keep p and 100 − p for a 45° diagonal. Five vertices in every state, or no interpolation. |
| Roll (CSS — .hsp-roll left / top / height per state) | 87% / 13% / 9% → 63% / 37% / 15% | The roll's center must be the midpoint of the fold line: for a cut meeting the top edge at p%, left: (p + 100) / 2 %, top: (100 − p) / 2 %. Height grows with the amount of rolled material. |
--hsp-dur / --hsp-ease (CSS — .hsp-sticker) |
.55s / cubic-bezier(.32, 1.35, .46, 1) | Duration and curve of the three transitions. The 2nd parameter above 1 makes the overshoot: 1 = clean stop, 1.6 = quivering corner. |
--hsp-c1 … --hsp-c5 (CSS — .hsp-sticker) |
cyan, pink, yellow, violet, green | The five colors of the iridescent conic. Keep light pastels: the motif is dark ink and relies on a background at 7:1 or more. The roll has its own tint, independent. |
| Rim (CSS — .hsp-face border 9px #fff) | 9px | Thickness of the white die-cut. 6 px at 120 px diameter, 12 px for a thick sticker. The cut goes through it: on hover it's almost only the rim that gets cut. |
| Ground shadow (CSS — .hsp-sticker::after, three states) | 0 10px 24px .45 → 0 16px 34px .55 → 6px 30px 48px .65 | The peel also reads through the shadow, which shifts 6 px on click. Reduce the blur (24 → 12 px) on a light background. |
| Size (CSS — .hsp-sticker width / height) | 208 × 208 px | Polygons and roll are in % of the sticker and follow; the rim, the motif (rem) and the shadow (px) don't — at 120 px, set the rim to 6 px and the motif to 1.3 rem, as the shipped .pv-product rules do. |
FAQ
polygon(0 0, 64% 0, 100% 36%, …) with the roll at 82% / 18%..hsp-flap-wrap.document). Each sticker is independent — class selection, no id needed; the id="hspDemo" in the sold HTML serves no purpose, remove it when pasting several stickers so you don't duplicate an id.
