Glass Shatter Reveal
A frosted pane cut into six triangular shards (clip-path) that, on click, tap, Enter or Space, fly off in 3D — 800 px perspective, up to 86 px sideways and 70 px towards the screen, 18 to 26° rotation — and fade in 0.7 s to reveal the hidden content beneath; a second gesture reforms the glass. 0.8 KB of JavaScript.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Glassmorphism has 47 effects, including 6 free. Explore the category →
3 usage examples
How it works
A 16/10 scene (.gsr-scene, violet radial gradient) holds a min(72%, 320px) pane at 4/3 (.gsr-stage). Underneath, the hidden content .gsr-reveal: 20 px corners, violet → pink gradient, white heading and text. On top, .gsr-glass, a div with role="button", tabindex="0" and aria-pressed, holding six full-frame .gsr-shards cut by clip-path: polygon() into six triangles meeting at the center — two on the top edge, one on the right, two at the bottom, one on the left. Each shard is glass: a white gradient from 24% to 6%, an inner rim, backdrop-filter: blur(9px) saturate(160%). With the pane intact, the content beneath is only a blurred color patch; a “Click to break” pill sits at the bottom.
The script, one listener per pane on the page, toggles the .gsr-shattered class on click and on Enter or Space (preventDefault prevents scrolling), and copies the state into aria-pressed. The class gives each shard its path, perspective(800px) translate3d(x, y, z) rotate(a): the two top shards leave at ±34 px and −72 px rising 70 px towards the screen, the side ones at ±86 px, the bottom ones at ±40 px and +74 px, with 18 to 26° rotations in opposite directions; and opacity 0. A 0.7 s transition in cubic-bezier(.2, .7, .2, 1): fast start, slow end. Measured at 250 ms: shards at about 85% of their path and 38-42% opacity, in Chromium, Firefox and WebKit; at 1 s, all at opacity 0, aria-pressed="true". A second gesture removes the class and the shards fly back together along the same path.
Why depth comes from perspective(800px) in each shard's transform rather than transform-style: preserve-3d on their parents: in Firefox, under the scene's perspective, a preserve-3d parent cancels the shards' backdrop-filter (measured with real screen captures over a striped background: hidden content perfectly readable). With one perspective per shard, rendering is the same in Chromium and the frost holds everywhere. Under reduced motion, the shards fade in place in 0.3 s instead of being thrown. The script adds .gsr-solid for a user who reduces transparency or a browser without backdrop-filter, and the blur is doubled as -webkit-backdrop-filter for Safari before 18. Each .gsr-glass has its own state: several panes can share a page (remove the gsrScene id when you duplicate the block). An older variant of this shattering glass also exists in the category.
Accessibility
- Keyboard: the pane is reachable with Tab (
tabindex="0"), outlined in 2 px white 3 px away on keyboard focus, and responds to Enter and Space — measured in Firefox and WebKit: Tab focuses, Enter breaks, Space reforms.aria-pressedannounces the state. Thearia-label(“Briser la vitre pour révéler”) and the pill are in French in the code: translate them with your page. With several panes, give each one anaria-labelsaying what it hides. - Revealed content not clickable: once broken, the pane stays on top, invisible — measured, the center of the scene still returns
.gsr-glass. A link or button in the revealed content does not get the click, which reforms the pane. For clickable content, see the FAQ. For a screen reader, the hidden content is read even with the pane intact: it is only hidden from the eye. If the reveal must stay a surprise, addaria-hidden="true"to the content and remove it on break. - Reduced motion: under
prefers-reduced-motion, the shards no longer move, they fade in place in 0.3 s — measured, null transform and opacity 0.02 at 250 ms, 0 at 1 s. - Reduced transparency and contrast: the script sets
.gsr-solidwhenprefers-reduced-transparency: reducematches (Chromium only so far) or withoutbackdrop-filter: solid#14162ashards, the content is then fully hidden until the break. The revealed content's white text measures 5.7:1 on the gradient's violet start and 4.6:1 on its pink end: it passes the 4.5:1 threshold over its whole surface.
Browser compatibility
CSS (clip-path: polygon(), perspective(), translate3d, backdrop-filter, transitions) + 0.8 KB of JavaScript, no dependency. Measured in Chromium 151, Firefox 153 and WebKit 26: same paths, same timing, same keys. The shards' frost shows in all three, with no preserve-3d (real screen capture for Firefox and WebKit, whose automated captures never show backdrop-filter). Unprefixed clip-path: polygon() exists since Chrome 55, Firefox 54 and Safari 13.1.
Without backdrop-filter, the script sets .gsr-solid: solid midnight-blue shards that hide the content entirely, break and reform intact. Without clip-path, the six shards become six stacked rectangles: the pane still hides, but breaks into six whole plates. Without JavaScript, the pane stays intact and the content beneath is never revealed — keep essential information (an emergency number, say) elsewhere on the page too.
The code
HTML structure to paste into your page (the CSS + JS come with Premium):
<div class="demo-preview">
<div class="gsr-scene">
<div class="gsr-stage">
<div class="gsr-reveal">…hidden content…</div>
<div class="gsr-glass" role="button" tabindex="0" aria-pressed="false" aria-label="…">
<span class="gsr-shard"></span> … (6 shards)
<span class="gsr-hint">…</span>
</div>
</div>
</div>
</div>The full HTML + CSS + JS of Glass Shatter Reveal, ready to paste — plus all 840 effects. Or $299 once, lifetime access.
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Paths (CSS — .gsr-glass.gsr-shattered .gsr-shard:nth-child(1) to (6)) |
perspective(800px) translate3d(±34 to ±86 px, −72 to +74 px, 50 to 70 px) rotate(±18 to ±26°) | Double the distances for an explosion leaving the scene; a larger z (150 px) brings the shards towards the screen. Keep perspective(800px) at the start of each transform: it is what gives the depth. |
Duration and rhythm (CSS — transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .7s) |
0.7 s, fast start | 1.2 s for a solemn reveal, 0.4 s for a sharp break. Stagger the shards with transition-delay on each :nth-child (0, 40, 80 ms…) for a spreading crack. |
Cut (CSS — clip-path: polygon(…) on each shard) |
6 triangles meeting at the center | Move the shared point (50% 50%) to 38% 62% for an off-center impact. For more shards, add spans with their polygon and path. |
Frost (CSS — backdrop-filter: blur(9px) saturate(160%)) |
9 px | 16 px or more so that no shape of the hidden content can be guessed; 4 px for a teaser. Change the value with and without prefix. |
Invitation pill (HTML — .gsr-hint) |
“Cliquez pour briser”, fades on break | Rewrite it for the device (“Tap”) and add white-space: nowrap if the text grows. Remove it if a heading above the pane already invites the gesture. |
Revealed content (HTML + CSS — .gsr-reveal) |
violet → pink gradient, white heading and text | Any HTML: image, price, promo code. The content fills the whole pane; adjust its padding and layout (display: flex for an image and text side by side). |
One-way break (JS — e.classList.toggle("gsr-shattered")) |
each gesture toggles between broken and intact | Replace toggle with add for a pane that does not reform (promo code, unlock). |
FAQ
.gsr-glass. Add .gsr-glass.gsr-shattered { pointer-events: none }: clicks go through to the content, the tel: link or the button works. But the pane can no longer be reformed by clicking; to keep that, add a “Put the glass back” button in the content that removes the gsr-shattered class and sets aria-pressed back to false.preserve-3d, under a perspective, no longer applies its backdrop-filter — measured case by case over a striped background, the pane then lets the hidden content be read. The shards never cross each other in depth, so they do not need a shared 3D space: perspective(800px) in each one's transform gives the same rendering (same distance, same vanishing point at the center of the pane) and the blur stays active everywhere.div that only answers clicks (no Tab, no announced state, no reduced-motion setting), with nothing behind the pane. Glass Shatter Reveal breaks its pane into six shards with trajectories written in the CSS to reveal content (.gsr-reveal), works by keyboard (Tab, Enter, Space) with aria-pressed, and honors reduced motion and reduced transparency. To hide then show information, take Glass Shatter Reveal; for a simple visual game on click, the other one is enough.
