Laser Beam
Three rainbow laser beams stretching and retracting in turn inside a dark frame, behind a glowing word.
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 .lsb-box (300×200 px, #050510 background, 16 px corners) hides whatever overflows. It holds three horizontal .lsb-beam elements: a 4 px one in the middle and two 2 px ones at 30% and 70% of the height. Each is painted with a gradient going from transparent through red, orange, yellow, green, cyan, blue, violet and magenta, then back to transparent.
Around each beam, two blurred copies of the same colours (::before at 15 px blur, ::after at 30 px) make the glow. The lsbMove animation (3 s) shrinks it to 30% of its length, slightly left of centre and half transparent, then stretches it across the full width at full brightness. The top beam is offset by half a cycle and the bottom one by a quarter, so the three never reach full length at the same moment.
The .lsb-text word ("LASER") sits above the beams, in white with a white, cyan and magenta glow. It is optional: without it, only the beams remain. The beams do not sweep the screen from top to bottom; they stay at their height.
Accessibility
- Real text: the word is HTML text that reads normally; the three beams are hidden from screen readers (
aria-hidden="true"). - Reduced motion: with
prefers-reduced-motion: reducethe beams stay stretched across the full width and stop moving (measured: 6 looping animations → 0 for two copies). - No flashing: brightness changes by half over 1.5 s, gradually; no sudden burst.
- Contrast: white text on
#050510exceeds 19:1; its coloured glow only hurts legibility at very small sizes. - No interaction: nothing reacts to hover, click or keyboard.
Browser compatibility
CSS only, no JavaScript. Measured in Chromium 151, Firefox 153 and Playwright's WebKit 26.5: 0 errors, two independent copies, nothing overflowing at 390 px, beams frozen under reduced motion. Minimum versions come from the inset property used by the glows.
Without filter the beams show as sharp lines with no glow; their motion is kept.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0270-root">
<div class="lsb-box">
<div class="lsb-beam" aria-hidden="true"></div>
<div class="lsb-beam lsb-beam-2" aria-hidden="true"></div>
<div class="lsb-beam lsb-beam-3" aria-hidden="true"></div>
<span class="lsb-text">LASER</span>
</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 |
|---|---|---|
--lsb-w and --lsb-h |
300px and 200px |
Box size; 100% to follow the container (never wider than it). |
--lsb-panel |
#050510 |
Box background; transparent or a see-through tint to lay the beams over an image. |
--lsb-spectrum |
rainbow gradient with transparent ends | Colour of the beams and their glow: a gradient of reds for a code reader, greens for a game screen. |
--lsb-main and --lsb-side |
4px and 2px |
Thickness of the middle beam and of the two side beams. |
--lsb-speed |
3s |
Length of one cycle; the side beams' offset follows automatically. |
--lsb-text and --lsb-font |
#fff and 1.5rem |
Colour and size of the central word (remove .lsb-text to keep only the beams). |
--lsb-radius |
16px |
Corner rounding of the box. |
--lsb-bg and --lsb-min-h |
#0a0a0f and 300px |
Root background and minimum height; transparent and 0 to fit it into your page. |
FAQ
--lsb-spectrum with a one-hue gradient, keeping the ends transparent, for example linear-gradient(90deg, transparent, #ff2a2a 15%, #ff6a5a 50%, #ff2a2a 85%, transparent). The glows take the same colour..lsb-text takes any short text, such as a brand name or a percentage updated by your script. It always stays above the beams.
