Holographic Badge
Round medallion ringed by a spinning multicoloured band, with a white glint sweeping its centre; the ring speeds up on hover. CSS only.
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 .hlb-badge medallion (160 px) is a dark disc. Its ::before pseudo-element is a magenta, cyan, yellow, green and pink conic gradient at 70% opacity that spins on itself in 4 seconds (--hlb-speed). The ::after pseudo-element covers that disc, inset by 3 px (--hlb-ring): only the ring stays visible, and its colours seem to flow around.
In the centre, the .hlb-inner disc (75% of the diameter) holds the real text, a very light coloured tint and a thin white circle. Its own ::before is a diagonal white band crossing it every 3 seconds (--hlb-shine), like a glint on metallic foil.
When the medallion is hovered, the ring goes to one turn per second (--hlb-fast). The same speed-up happens when the medallion sits in a link or button that gets keyboard focus. Without hover, everything turns on its own, continuously.
Accessibility
- Real text: the central word (“VERIFIED” by default) is in the HTML and read by screen readers; replace it with a word in your language. For a symbol such as “✓”, add visually hidden text that says what it means.
- Not a button: by default the medallion is only an indicator, so it can't be reached with the keyboard, on purpose. If it should lead somewhere or trigger an action, put it inside an
<a>or a<button>: keyboard focus then speeds up the ring like hover. - Touch: on a bare medallion, a finger doesn't speed up the ring in WebKit (measured), while Chromium and Firefox apply hover on touch. Inside a button, it speeds up in all three engines (measured).
- Reduced motion: with
prefers-reduced-motion: reduce, the ring stops and the glint stays still at 30% opacity; the medallion and its text remain displayed (measured on two copies: 4 looping animations → 0). - No flashing: rotation and glint are slow and continuous, with no sudden change of brightness.
Browser compatibility
CSS only, no JavaScript. Measured in Chromium 151, Firefox 153 and Playwright's WebKit 26.5: 0 errors, two independent copies, hover, 390 px and reduced motion. Minimum versions per @mdn/browser-compat-data: the conic gradient (Firefox 83) and the inset property (Chrome 87, Safari 14.1) set the floor.
Without conic gradients, the ring isn't painted: the dark disc, the inner disc and its text remain. Without inset, replace it with equal top, right, bottom and left values.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0269-root">
<div class="hlb-badge">
<div class="hlb-inner">VERIFIED</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 |
|---|---|---|
--hlb-size |
160px |
Medallion diameter; the inner disc follows (75%). |
--hlb-ring |
3px |
Thickness of the visible ring. |
--hlb-speed and --hlb-fast |
4s and 1s |
Duration of one turn of the ring at rest, then on hover or focus. |
--hlb-shine |
3s |
Duration of one pass of the white glint over the inner disc. |
--hlb-font |
.9rem |
Size of the central text (uppercase, 2 px letter spacing). |
--hlb-face |
#1a1a2e |
Colour of the medallion's face, under the ring and around the inner disc. |
--hlb-bg and --hlb-min-h |
#0a0a0f and 300px |
Root background and minimum height; transparent and 0 to place it in a line of text or a card. |
Content of .hlb-inner |
VERIFIED |
A word, a score, a symbol: whatever you put there is centred under the glint. |
FAQ
--hlb-size: 40px, --hlb-ring: 2px, --hlb-bg: transparent, --hlb-min-h: 0, then display: inline-flex, width: auto and vertical-align: middle on the root (otherwise it drops to its own line). Below 40 px, keep a single character in the centre.<button> or an <a> (measured: a tap then speeds up the ring in all three engines).conic-gradient of .hlb-badge::before: replace the colour list there, repeating the first colour at the end to avoid a seam.
