Holographic
Tinted glass card with a continuously shifting rainbow holographic sheen — 100% CSS, zero JavaScript.
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
The effect relies on a linear-gradient(135deg) with four RGBA stops — vivid pink, cyan, yellow, mint green — stretched to 400% 400%, four times the card's surface area. The @keyframes holographic animates background-position from 0 50% to 100% 50% and back over 5 s, producing a continuous horizontal sweep of the rainbow spectrum.
Each stop uses an opacity of 0.3 — the hues sit on the dark base #12121a while staying translucent, mimicking real holographic foil that irises without oversaturating. When the card is placed on a different background (image, video, gradient), the colors interact with what shows through — the look shifts with context.
The backdrop-filter: blur(10px) layer adds glassmorphism: content behind the card is blurred, producing a frosted-glass look. The border: 1px solid rgba(255,255,255,.2) draws a subtle bright outline that anchors the card in the scene.
The animation is handled entirely by the browser's CSS engine — no JavaScript required. Add will-change: background-position to hint GPU compositing on devices that do not enable it by default.
Accessibility
- prefers-reduced-motion absent: the source code contains no
@media (prefers-reduced-motion: reduce)rule — the animation loops forever regardless of OS setting. Add@media (prefers-reduced-motion: reduce) { .card-holographic { animation: none; } }if the card is persistently visible. - No ARIA attributes (
aria-hidden,role,aria-label) are present in the base structure — text content inside the card is read directly by screen readers, which is correct if the card is a functional component. - No JavaScript interaction: the effect is purely decorative and captures neither click nor keyboard events.
- Text contrast: white (
#fff) on rendered background ≈#161624→ ratio ≥ 7:1, WCAG AAA met. - The
backdrop-filteris invisible to the accessibility tree — screen readers see only the card's text content.
Browser compatibility
Requires linear-gradient, CSS animation, and backdrop-filter. The first two are universal; backdrop-filter is natively supported from Chrome 76, Firefox 103, and Safari 9.
Without backdrop-filter (Firefox < 103 unprefixed), the card renders without blur — the rainbow animation remains fully functional.
The code
HTML structure to paste into your page (CSS + JS available with a premium account):
<div class="card-demo card-holographic">
<!-- Free content: text, icon, badge -->
<span>Your content</span>
</div>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 |
|---|---|---|
| --bg-card | #12121a | Base background color under the gradient. A lighter value makes the sheen more pastel; #000 intensifies it. |
| --radius-xl | 1rem | Corner radius. 20px for a wide card, 50% for a circular badge. |
| Gradient stops (4 rgba stops) | pink, cyan, yellow, green | Edit the hex values inside linear-gradient(135deg, rgba(255,0,150,.3), …). Use 2–6 brand stops for a monochrome or complementary iridescence. |
| background-size | 400% 400% | 200% 200% tightens the colors, 600% 600% produces a very gradual transition between hues. |
| animation-duration | 5s | Full cycle length. 3 s = fast shimmer, 8 s = slow, elegant sheen. |
| animation-timing-function | ease | linear for a uniform sweep, ease-in-out for a more pronounced breathing effect at both ends. |
| backdrop-filter blur | 10px | Frosted-glass blur radius. 20px for thick glass, 0 to remove glassmorphism entirely. |
| border opacity | rgba(255,255,255,.2) | Luminous rim opacity. rgba(255,215,0,.45) for a gold edge, .5 for a more visible outline. |
FAQ
holographic animation is driven by native @keyframes — no JS is needed. Copy the .card-holographic class and the @keyframes block, then apply them to any div.animation-delay: -Xs to each card (e.g. -0s, -1.6s, -3.3s). Negative delays start the animation mid-cycle, breaking the visual lock-step without changing the duration.backdrop-filter is only natively supported from Firefox 103. Earlier versions require enabling the layout.css.backdrop-filter.enabled flag in about:config. In production, add a fallback: background: rgba(18,18,26,.88) on .card-holographic so the card stays readable without the blur.
