Broken Glass
A pane of broken glass in pure CSS: five fine cracks, slanted reflections and four shards whose glint slowly breathes, under text that stays crisp.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Distortion has 31 effects, including 5 free. Explore the category →
3 usage examples
How it works
The .bgl-glass pane (250×180 px, night-violet gradient #2d1b4e → #1a1a2e, 8 px corners) is streaked by its ::before pseudo-element: four very soft diagonal bands of white light (5 to 10%) that read as a window. On top, five one-pixel .bgl-crack lines draw the cracks; each is white in the middle and fades towards its ends, tilted from −20° to 25°.
Four .bgl-shard elements cut into irregular quadrilaterals (clip-path: polygon()) stand for the splinters, with a 15% white rim. Their opacity goes from 0.5 to 1 and back over 3 s, offset from one shard to the next (0; 0.5; 1; 1.5 s): the light seems to slide from piece to piece. Nothing else moves.
Cracks and shards are placed and sized in percentages of the pane: with --bgl-w: 100% and --bgl-h: 100% the whole pattern grows to the size of a page header. The .bgl-text sits above (z-index: 1) with a faint white glow.
No JavaScript. Measured in Chromium 151, Firefox 153 and WebKit 26.5: same rendering, two independent copies, no errors.
Accessibility
- Reduced motion: under
prefers-reduced-motion: reduce, the shards stop breathing; they stay at 75% opacity. The broken glass is complete, just still. - Photosensitivity: no flashing. The only movement is a slow opacity change (3 s per cycle) on small, dim areas.
- Screen readers: cracks and shards carry
aria-hidden="true"; only the.bgl-texttext is read. If the pane serves as a game-over panel, announce it withrole="dialog"and anaria-labelon its container. - Click and touch: cracks and shards have
pointer-events: none: a button placed in.bgl-textstays clickable everywhere.
Browser compatibility
CSS only: variables, clip-path: polygon(), inset, calc() in animation-delay. Minimum version set by the inset property according to MDN data (Chrome 87, Firefox 66, Safari 14.1). Measured in Chromium 151, Firefox 153 and WebKit 26.5.
Without inset, the slanted reflections disappear (cracks and shards remain). Without clip-path, the shards become pale rectangles. Without CSS variables, the pane loses its size and background.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0259-root">
<div class="bgl-glass">
<div class="bgl-crack bgl-crack-1" aria-hidden="true"></div>
<!-- … bgl-crack-2 to bgl-crack-5 -->
<div class="bgl-shard bgl-shard-1" aria-hidden="true"></div>
<!-- … bgl-shard-2 to bgl-shard-4 -->
<span class="bgl-text">…</span>
</div>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
--bgl-w / --bgl-h |
250px / 180px |
Pane size. Cracks and shards follow, in percentages. 100% fills the container. |
--bgl-bg |
linear-gradient(135deg, #2d1b4e, #1a1a2e) |
Pane background. The cracks are white and translucent: keep a dark or mid-tone background so they show. |
--bgl-speed |
3s |
Duration of the shards' breathing; the offsets between shards follow (a sixth, a third, half of the cycle). |
--bgl-radius |
8px |
Corner radius of the pane. |
--bgl-root-bg / --bgl-root-h |
#0a0a0f / 300px |
Background and minimum height of the root. A semi-transparent background turns it into a veil over your page; transparent and 0 make it vanish. |
Cracks (CSS — .bgl-crack-1 to -5) |
Fixed positions and angles | Change top, left and rotate() for another impact, or copy a .bgl-crack line to add one. |
Text (HTML — .bgl-text) |
“SHATTERED” | Replace it with any content: heading, score, buttons. |
FAQ
--bgl-bg (url(photo.jpg) center / cover). Cracks and shards are white and translucent: on a very light photo, darken it slightly with a black gradient layered in the same value.background of .bgl-shard to rgba(255,255,255,.08).
