Effects / CSS
Neon glow
Glowing tube-light text and outlines with a gentle flicker.
NEON
Prompt to build it
Build neon-sign text and a rounded outline on a dark wall. Use stacked text-shadow/box-shadow (2px, 8px, 24px, 48px) in magenta and cyan, and a subtle irregular flicker keyframe. Make it responsive, cap devicePixelRatio at 2, pause when off-screen, and show a still frame when prefers-reduced-motion is set. No external libraries.
Tested code
One self-contained HTML file with no libraries: the same code that runs above. Your AI gets it from Flow's get_effect tool.
Show the code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Neon glow | Flow effect</title>
<!--
Flow effect: Neon glow (https://flow.donta.io/effects/neon-glow)
Self-contained: no libraries. Copy the .fx-stage element, the CSS and the
script into your project and size .fx-stage however you like.
-->
<style>
:root { --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; --body: ui-sans-serif, system-ui, sans-serif; }
html, body { margin: 0; min-height: 100%; background: #0e0e10; display: grid; place-items: center; }
.fx-stage { width: min(100vw, 960px); }
/* Stage that every effect fills. Container units (cqw/cqmin) size the art. */
.fx-stage {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 16px;
container-type: size;
background: #111;
isolation: isolate;
}
.fx-fill {
position: absolute;
inset: 0;
}
.fx-fallback {
position: absolute;
inset: 0;
}
.fx-center {
display: grid;
place-items: center;
}
/* ── Neon ─────────────────────────────────────── */
.fx-neon {
background: radial-gradient(circle at 50% 50%, #241730, #0c0812 75%);
}
.fx-neon-sign {
padding: 4cqmin 7cqmin;
border: 0.8cqmin solid #9ff6ff;
border-radius: 5cqmin;
box-shadow: 0 0 1cqmin #9ff6ff, 0 0 4cqmin #2fd8ff, inset 0 0 4cqmin #2fd8ff, 0 0 10cqmin rgba(47, 216, 255, 0.5);
font: 500 17cqmin/1 var(--display);
letter-spacing: 0.04em;
color: #ffe3fb;
text-shadow: 0 0 0.6cqmin #fff, 0 0 2cqmin #ff4fd8, 0 0 5cqmin #ff4fd8, 0 0 10cqmin #ff2fbf;
animation: fx-flicker 5s steps(1) infinite;
}
@keyframes fx-flicker {
0%, 100% { opacity: 1; }
91% { opacity: 1; }
92% { opacity: 0.55; }
93% { opacity: 1; }
95% { opacity: 0.7; }
96% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.fx-stage *, .fx-stage *::before, .fx-stage *::after { animation-play-state: paused !important; }
}
</style>
</head>
<body>
<div class="fx-stage">
<div class="fx-fill fx-center fx-neon"><div class="fx-neon-sign">NEON</div></div>
</div>
</body>
</html>
How it works
Stacked text-shadow and box-shadow layers in the same hue create the glow; a keyframe flicker briefly drops the opacity a few times per cycle.
Guardrails
- Avoid rapid flicker: never more than 3 flashes per second (WCAG 2.3.1).
- Respect prefers-reduced-motion: show a still frame instead of the animation.
- Pause when off-screen or when the tab is hidden (IntersectionObserver + visibilitychange).
- Keep text off busy animated areas, or give it a solid backing that passes WCAG contrast.
- One showpiece effect per page. If everything moves, nothing stands out.