Holographic Effect
A rainbow gradient (magenta→cyan→yellow→green) scrolls diagonally on loop over a dark background — holographic shimmer in 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. Backgrounds has 50 effects, including 6 free. Explore the category →
3 usage examples
How it works
The effect relies on a single animated CSS property: background-position. The linear-gradient(125deg, …) is built from five semi-transparent RGBA stops (opacity ~0.45) over a #0a0a0f background — the dark base shows through each color, producing the pearlescent depth characteristic of holographic surfaces.
The gradient is sized at 200% × 200% via background-size: 200% 200%, twice the container in both axes. The @keyframes holographic animation moves the anchor point from 0% 0% to 200% 200% over 8 seconds (linear, infinite loop) — the colored layer scrolls diagonally behind the content.
The stop sequence (rgba(255,0,255) → rgba(0,255,255) → rgba(255,255,0) → rgba(0,255,0) → rgba(255,0,255)) closes the cycle: the first and last stops are identical, making the loop perfectly seamless with no visible jump. The 125° angle drives the scroll along a right-descending diagonal — the visual signature of a classic hologram.
Accessibility
- prefers-reduced-motion: the effect code does not include a
@media (prefers-reduced-motion: reduce)rule — add one at integration:@media (prefers-reduced-motion: reduce) { .bg-holographic { animation: none; } }. - The effect is purely decorative (a background); overlay content must carry its own
role,aria-label, andaltattributes. - Apply
aria-hidden="true"to the.bg-holographicelement if it contains no text — it serves only as a decorative background. - Overlay text contrast: the background cycles between deep black and vivid saturated colors — use a scrim (
rgba(0,0,0,0.45)) or white text withtext-shadowto meet WCAG AA (ratio ≥ 4.5:1). - No keyboard interaction or focus management is produced by the effect (passive CSS animation) — no focus-trap risk.
Browser compatibility
Requires @keyframes, background-size, and linear-gradient with RGBA values — supported in all modern browsers since 2016.
Without <code>@keyframes</code> support, the gradient renders statically — holographic colors display without scrolling. No JS error; overlay content remains readable.
The code
HTML structure to paste into your page (CSS + JS available with a premium account):
<div class="bg-holographic" style="position:relative;min-height:300px;overflow:hidden;">
<!-- Optional scrim for text readability -->
<div style="position:absolute;inset:0;background:rgba(0,0,0,0.35);pointer-events:none;" aria-hidden="true"></div>
<!-- Overlay content -->
<div style="position:relative;z-index:1;padding:2rem;">
<h2>Your title</h2>
</div>
</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 |
|---|---|---|
| animation-duration (8s) | 8s | Duration of one full cycle. Increase (12–20 s) for smooth, subtle movement; decrease (4–6 s) for a pulsed, energetic feel. |
| RGBA stops in linear-gradient | magenta→cyan→yellow→green→magenta | Replace the rgba(R,G,B,.45) values to change the palette. Keep the first and last stop identical for a seamless loop. |
| background-size (200% 200%) | 200% 200% | Gradient size relative to the container. Increase to 300% or more for a longer scroll and softer color transitions. |
| Angle 125deg in linear-gradient | 125deg | Gradient direction. 90deg = straight vertical, 135deg = classic diagonal, 45deg = ascending diagonal. |
| Alpha values (.45 / .40) | 0.45 / 0.40 | Per-color opacity over the dark background. Increase toward 0.7–0.9 for vivid, saturated colors; decrease toward 0.2 for a very subtle iridescent wash. |
| animation-timing-function (linear) | linear | Replace with ease-in-out for a slow-in/slow-out effect — the gradient 'breathes' rather than scrolling uniformly. |
FAQ
.bg-holographic class only sets background and animation properties. It works on a <div>, <section>, <button>, or any tag that accepts a CSS background. Add overflow: hidden to keep the animation clipped inside elements with border-radius.element.style.animationPlayState = 'paused'; to resume: 'running'. To disable globally on a user preference, add @media (prefers-reduced-motion: reduce) { .bg-holographic { animation: none; } } to your stylesheet.#0a0a0f): semi-transparent RGBA stops blend with black to produce the iridescent look. On a white background, the same stops yield very washed-out pastels — increase the alpha values to 0.7–0.9 and adjust the hues to maintain visual impact.
