Hologram Projection
A translucent cyan panel that floats and gently tilts, crossed by fine scan lines, with a glow cast beneath it: a pure-CSS hologram.
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 .hlp-panel (200×200 px, 10 px corners) is filled with a cyan gradient going from 10% opacity at the top to 30% at the bottom, outlined in cyan at 50%. Its content is centred, bold, coloured #0ff, with a double glow (10 and 20 px text-shadow).
The hlpFloat animation lifts it 10 px over 3 seconds while tilting it 5° back then 5° forward (rotateX). The 1,000 px perspective set on .hlp-stage makes that tilt visible.
Two pseudo-elements complete the illusion. ::before covers the panel with 1 px horizontal lines every 2 px that scroll continuously (0.1 s cycle). ::after draws a soft oval glow 50 px below, like the projector's light on the floor; it follows the panel as it moves.
Accessibility
- Real text: the panel content ("HOLO" by default) is HTML text and reads normally. An image or diagram placed inside keeps its own alternative text.
- Reduced motion: with
prefers-reduced-motion: reducethe panel stays flat and still and the scan lines stop; everything remains on screen (measured: 4 looping animations → 0 for two copies). - No flashing: the scan lines are very faint (cyan at 10%); their fast scroll gives a shimmer, not a flash.
- Link or button: the class can go on an
<a>, which then gets a focus ring in the hologram colour. For a message that pops up, addrole="status"yourself. - Legibility: the text glow widens the letters; below 13 px, tone it down in your CSS.
Browser compatibility
CSS only, no JavaScript. Measured in Chromium 151 and Firefox 153: 0 errors, visible 3D tilt, two independent copies, nothing overflowing at 390 px. In Playwright's WebKit 26.5 the panel floats and the lines scroll; since that tool is not a reliable reference for CSS 3D, the tilt remains unverified for Safari.
Without 3D transforms the panel moves up and down without tilting; the lines and the glow remain.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0266-root">
<div class="hlp-stage">
<div class="hlp-panel">HOLO</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 |
|---|---|---|
--hlp-w and --hlp-h |
200px and 200px |
Panel size; 100% to follow the container (never wider than it). |
--hlp-color |
#0ff |
Colour of the text, its glow and the focus ring. |
--hlp-fill-top, --hlp-fill-bottom, --hlp-edge |
cyan at 10%, 30% and 50% | Panel gradient and border colour: change them together with --hlp-color for a green or amber hologram. |
--hlp-lines and --hlp-floor |
cyan at 10% and 30% | Colour of the scan lines and of the floor glow. |
--hlp-lift and --hlp-tilt |
10px and 5deg |
Float height and tilt angle. |
--hlp-speed |
3s |
Length of one full float. |
--hlp-radius |
10px |
Corner rounding (half the height for a pill). |
--hlp-bg and --hlp-min-h |
#0a0a0f and 300px |
Root background and minimum height; transparent and 0 to fit it in. Leave about 60 px below the panel for the glow. |
FAQ
.hlp-panel is centred and floats with it. An SVG drawn in currentColor takes the hologram colour directly.overflow: hidden from the parent.--hlp-color for the text, then transparent versions of the same hue for the fill, border, lines and glow.
