Crystal Effect
A translucent hexagonal crystal with blue, violet and green tints, slowly turning on itself in a light perspective, wrapped in a bluish glow.
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 .xtl-shape (150×200 px) is cut into a hexagon with clip-path. It stacks two layers: a white gradient (40%, 10%, 30%) with an inner white glow, then, inset by 3 px, a blue, violet and green gradient that gives the crystal its colour.
The xtlTurn animation spins it on the vertical axis from 0 to 180° and back over 10 seconds, with a small 5° forward and backward tilt. Halfway through, the crystal shows its edge and gets very thin before showing its back face.
Two repairs: the .xtl-crystal container now has a 600 px perspective (without it the turn looked like a mere squash), and the bluish glow comes from filter: drop-shadow on that container. It used to be a shadow of the shape itself, entirely cut away by the clipping and therefore invisible.
Accessibility
- Decorative: the crystal has
aria-hidden="true"; it carries no text or role. If you use it as a logo, put the name in the link around it. - Reduced motion: with
prefers-reduced-motion: reducethe crystal stops slightly turned (25°), which keeps a sense of volume (measured: 2 looping animations → 0 for two copies). - No flashing: the turn is slow and the colours stay pale; the edge-on moment causes no flash.
- Contrast: the faces are white and see-through; on a light background the crystal nearly vanishes. Use a dark background or denser colours.
Browser compatibility
CSS only, no JavaScript. Measured in Chromium 151 and Firefox 153: 0 errors, turn in perspective, visible glow, two independent copies, nothing overflowing at 390 px. In Playwright's WebKit 26.5 a frozen mid-turn frame looks like Chromium's, but that tool is not a reliable reference for CSS 3D, so the perspective remains unverified for Safari.
Without clip-path the crystal becomes a rectangle with the same gradients; without 3D transforms it narrows and widens with no depth.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0268-root">
<div class="xtl-crystal" aria-hidden="true">
<div class="xtl-shape"></div>
</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 |
|---|---|---|
--xtl-w and --xtl-h |
150px and 200px |
Crystal size (it never gets wider than its container). |
--xtl-depth |
600px |
Perspective: smaller makes the turn more dramatic; none brings back the old flat look. |
--xtl-speed |
10s |
Length of a full round trip (0 → 180° → 0). |
--xtl-face-1 to --xtl-face-3 |
white at 40%, 10%, 30% | Gradient of the outer layer, which makes the highlights. |
--xtl-tint-1 to --xtl-tint-3 |
blue at 30%, violet at 20%, green at 30% | Colour of the crystal's core: violet for an amethyst, pink for a quartz. |
--xtl-glow |
rgba(100,200,255,.3) |
Colour of the glow around the crystal; transparent removes it. |
--xtl-bg and --xtl-min-h |
#0a0a0f and 300px |
Root background and minimum height; transparent and 0 for a logo or an icon. |
FAQ
--xtl-speed) makes it even less noticeable.aria-label). Since the crystal is hidden from screen readers, the link carries the information.
