Neon Background for React

A large rounded frame of hot-pink neon runs round the box, with two cyan tubes inside it, each one turning a corner, and the light they cast washes the faintly textured wall. Each tube has a pale core, a tight glow, a wide bloom and a halo on the wall, all drawn once by a stack of static drop-shadows; only their brightness moves, a slow hum and, now and then, a quick flicker like a tired transformer, through CSS keyframes the install adds to your stylesheet, so the browser composites it and no script runs. On a light theme they turn into coloured glass tubes with a soft glow and a shadow on a pale wall.

Use it on music, gaming or event pages that want a night-time sign, with your headline inside the frame. For glowing rings receding into a tunnel, use Portal; for neon beams racing along a grid, Laser Grid; for the synthwave floor, Retro Grid; for the same mood broken up, Glitch.

Installation

Usage

import { Neon } from "@/components/ui/neon";

<Neon className="flex min-h-[480px] items-center justify-center">
  <h1 className="text-5xl font-semibold">Live tonight</h1>
</Neon>

Neon is a container: give it a size, put your content inside, and the wall sits behind it. The tubes follow the box's proportions, so the frame fits a banner, a card or a phone screen. For the whole page, pass className="fixed inset-0 -z-10".

Demos

Colours

colors takes two CSS colours, the frame's and the inner tubes'; here amber and violet, with intensity="strong" for a wider bloom, on a card that stays dark in both themes.

Steady

flicker={false} keeps only the hum, intensity="subtle" dims the glow and speed={0.5} slows the hum, for a calm card behind body text.

Accessibility

The wall is decorative: it's hidden from screen readers and lets every click through to your content. The flicker is rare and shallow: each tube stutters about once every 11 to 17 seconds, two quick dips that never go dark, well under once a second over the whole wall, and the stylesheet clamps speed so a faster setting can't make it more frequent. With reduced motion the tubes shine steadily, with no hum and no flicker. The middle of the wall stays dark (pale, on a light theme), so text inside the frame keeps your page's contrast; keep it in your foreground colour.

FAQ

API Reference