Guides · · Maxwell Prehoda
11 Neon Effect CSS Examples That Glow Without Melting the GPU
A convincing CSS neon effect is a stack of shadows, not one: a few tight white or pale layers for the hot core of the tube, then wider layers in the sign's colour for the halo, on a dark background so the light has somewhere to go. `text-shadow` takes a comma-separated list, and the first shadow sits on top, so you build from the inside out. Borders and buttons use the same idea with `box-shadow`, including an `inset` layer for light spilling inward. Flicker is optional, and it is where most neon effects go wrong.
Below are 11 examples worth copying: the tutorials and tools that define the technique, a code editor theme that made neon famous with developers, the fonts that look like bent glass tubes, and three of our own pieces. Each live demo is copyable HTML and CSS from our directory.
1. CSS-Tricks: How to Create Neon Text With CSS: Best for learning the layered text-shadow technique properly
Platform: CSS tutorial by Silvia O'Dwyer, free
Silvia O'Dwyer's May 2021 article is still the clearest walkthrough. It starts with white shadows at small blur radii for the inner glow, then adds wider shadows in a bright green (`#0fa`) for the outer glow, and explains why: a single shadow has no depth, while several stacked shadows read as light falling off from a tube.
It then covers the three things people add next. A `flicker` keyframe that drops the whole shadow stack to `none` at a few chosen percentages. A slower `pulsate` keyframe that varies the blur radii. And a glowing frame: a white border with a `box-shadow` that includes an `inset` layer, because text-shadow cannot glow inward. It closes with a `prefers-reduced-motion` query that sets `animation: none`.
Our Neon Flicker Text below is a compact version of the same recipe: layered text-shadows for the glow and a few sharp dips in opacity for the flicker.
Watch out for: Readers in the comments reported heavy CPU and GPU use from animating text-shadow and box-shadow, especially on phones. Animate opacity of a glow layer instead of the shadow values.
2. Chris Bongers' flickering letter: Best for a sign where one tube is on the blink
Platform: CSS, Daily Dev Tips + CodePen, free
Chris Bongers' August 2020 Daily Dev Tips post celebrates 100 newsletter subscribers with a purple neon headline in the Pacifico script font. The glow is layered `text-shadow` with a dark grey shadow at the end to make the glow look thicker, and only the letter u flickers: a keyframe briefly resets its colour and removes its shadow, like a tube with an electrical fault.
Animating one letter instead of the whole sign is the move to steal. It reads as more realistic, it draws the eye without making the whole headline unreadable, and it is far cheaper than flickering every shadow on the page.
Our Broken Neon Sign Text below takes the same approach: every tube burns steadily except one letter, which buzzes, cuts out and comes back, and only that letter's span is animated.
Watch out for: Script fonts like Pacifico join letters, so a single flickering letter can leave a visible gap in the stroke. Pick a letter at the start or end of a word.
3. SynthWave '84 by Robb Owen: Best for seeing neon applied to a whole interface
Platform: VS Code theme, MIT license
SynthWave '84 is the reason a lot of developers know what neon text looks like at work. It is a synthwave-inspired colour theme for VS Code, and its optional Neon Dreams mode makes code glow. You enable it from the command palette, `synthwave84.brightness` sets the glow strength (0.45 by default), and `synthwave84.disableGlow` keeps the theme's chrome while turning the glow off.
The theme is a useful lesson in dosage. The glow sits on syntax tokens in a dark editor, so it works as accent light rather than as the whole design, and the author still calls it experimental and not meant for extended use.
Our Synthwave Retro Text below is the full 80s treatment in CSS: a chrome title with a pink glow over a neon grid that scrolls toward you, where only the grid's background moves.
Watch out for: Neon Dreams works by modifying VS Code's internal files, so VS Code may report itself as corrupted and the step must be repeated after every update. It is a showcase, not a model for production CSS.
4. Tilt Neon by Andy Clymer: Best for neon headlines that need a real tube-like font
Platform: Google Fonts, variable font, free
Most neon effects fail on the font before the shadows: a heavy sans with a glow looks like a lit-up sticker, not a bent tube. Tilt Neon, added to Google Fonts in December 2022 by Andy Clymer, is part of a family inspired by the dimensional lettering of storefront signs, built on a sign painter's geometric sans. Its neon style gives the glow a clean line to follow, the way light follows a real tube.
It is also a variable font with two unusual axes, `XROT` and `YROT`, each running from -45 to 45, which rotate the letterforms as if you were looking at the sign from an angle. The rotation stops at 45 degrees so the letters stay readable, and because it is an axis you can animate it with font-variation-settings, no transform needed.
Our Neon Glow Pulse Text below shows the cheap way to make any font breathe: a blurred copy of the word behind it swells and fades, and only the copy's opacity and scale animate.
Watch out for: Single-stroke display fonts get thin at small sizes. Keep neon type for headlines and use a normal text face, without glow, for anything people need to read at length.
5. Monoton and Neonderthaw: Best for retro signage and handwritten neon scripts
Platform: Google Fonts, free
Two more Google Fonts that do half the neon work for you. Monoton, by Vernon Adams, is a multi-line display face, a contemporary take on 1930s metalpress fonts such as Rudolf Koch's Prisma, meant for sizes above 30 points. Its parallel strokes read like a sign made of several tubes. Neonderthaw, by Robert Leuschke, added in 2021, is a single-weight script its description says simulates neon: add blur and glow and you have a cafe or bar sign.
Pick by context: Monoton for diners, arcades and retro events; Neonderthaw for warmer, personal signage such as a menu, a wedding site or a creator's page. Both need only two or three shadow layers because the shapes already suggest light.
Our Neon Sign Turn On Effect below is the classic entrance for either: every letter starts as a dead glass tube and stutters to life on its own schedule, then the sign stays lit.
Watch out for: Display fonts like these are a separate download. Preload them or set font-display so the glow does not first appear on a fallback font and then jump.
6. CSSmatic neon text generator: Best for dialling in glow colour and layer count by eye
Platform: Free web tool, no sign-up
CSSmatic is a non-profit set of CSS tools, and its neon generator exposes exactly the variables that matter: sign text, glow colour, glow intensity, number of shadow layers, font size and a flicker toggle. The CSS updates live, and you can copy it or download it as a file. Three presets (cyan classic, hot pink and toxic green) are a quick way to compare palettes.
The layer count slider is the most educational control. Step from two layers to six and watch where the effect stops improving; that is the number to ship, because every extra layer costs paint time.
Our Two Color Neon Sign Text below shows what you can do once the glow is right: two words take turns, the second colour is your accent pushed round the colour wheel with hue-rotate.
Watch out for: Generators tune glow against their own dark preview. Check the result on your real background, where a lighter surface can make the halo look like a smudge.
7. Tailwind CSS v4.1 coloured shadows: Best for neon buttons and icons in Tailwind projects
Platform: Tailwind CSS v4.1 and later
Tailwind v4.1, released on 3 April 2025, added `text-shadow-*` utilities and coloured `drop-shadow` utilities, which together cover most neon work without custom CSS. `text-shadow-lg text-shadow-cyan-500/50` gives text a coloured halo with an opacity modifier, and `drop-shadow-xl drop-shadow-cyan-500/50` does the same for SVG icons, which is how you make a line icon glow along its stroke.
For a believable tube you still stack layers, which in Tailwind means an arbitrary value or a theme variable for the multi-shadow stack, but the colour and opacity modifiers make it easy to keep one glow colour consistent across text, icons and borders.
Our Neon Button below is the hover version in plain CSS: an outlined button that switches on like a neon sign, with the text and border glowing and light bleeding inward.
Watch out for: The built-in text shadows are subtle by design (the docs note default opacities of 20 percent or less). Neon needs coloured shadows at much higher opacity, so set them explicitly.
8. Free Frontend glow text collection: Best for browsing many CodePen neon variants quickly
Platform: Curated CodePen collection, free
When you want to see many takes on the same idea, Free Frontend's glow text roundup collects CodePen demos with a note on each technique: multi-layer text-shadow signs with per-letter flicker timing, a flame effect built entirely from shadows, a hue-rotate colour cycle, a wave made with negative animation delays, and a few that randomise the flicker with JavaScript and CSS variables.
Use it to pick a direction, then rebuild the effect yourself with fewer layers. Many pens animate every shadow on every letter, which looks great in a single demo and stutters on a real page.
Our Neon Sign Flicker Loader below is a small, cheap example of the genre: a neon tube circle that buzzes on with a few sharp flickers, hums, then cuts out, with the unlit glass still faintly visible.
Watch out for: Many entries are posted under anonymous CodePen accounts, so check the license on each pen before you copy code into a commercial project.
9. Our Neon Border: Best for framing a dark panel or feature card
Platform: Motions directory, free, pure CSS Ours
A neon tube framing a dark panel: a hot white core, a coloured halo and light spilling onto the wall behind it. It hums and blinks out for a beat now and then, and only opacity animates, so the glow never forces the browser to repaint the shadows.
Pick it for a featured pricing tier, a launch banner or a game lobby card, where a lit frame says this one matters. For more lit outlines see our border animation examples and the Glowing Borders collection.
Watch out for: A blinking frame next to body text is distracting. Use the steady state for content areas and keep the blink for a single hero element.
10. Our Neon Toggle Switch: Best for settings screens in dark, playful products
Platform: Motions directory, free, pure CSS Ours
A dim glass tube on a dark panel that flickers to life like a neon sign when you switch it on: the outline and knob light up in your accent colour with layered glow. It uses box-shadow and opacity only, and the flicker plays once on the change, not on a loop.
Neon works on a toggle because the metaphor is honest: off is an unlit tube, on is a lit one. It suits games, music apps and creative tools; for the rest of the family see our toggle switch examples.
Watch out for: Do not rely on glow alone to show the state. Keep the knob position change so the switch reads correctly in forced colours mode and for people who cannot see the colour shift.
11. Our Neon Sign Card Hover: Best for portfolio and event cards that light up on hover
Platform: Motions directory, free, pure CSS Ours
Open late
Cocktails and vinyl until 2 am, Thursday to Saturday.
A dark card with an unlit neon tube for a border and title. On hover the tube stutters on like a real sign, then holds a steady glow. One keyframe set drives both the tube and the lettering, so they always light together.
Hover is the best trigger for neon on content pages: the page stays calm until someone shows interest, and the flicker happens once per hover instead of forever. Browse the Neon Text collection for headline versions of the same idea.
Watch out for: Hover does not exist on touch screens. Make sure the unlit state is readable on its own and consider lighting the card on focus as well, for keyboard users.
How to choose a neon effect
Match it to the surface
Headlines get text-shadow neon with a tube-like font such as Tilt Neon or Monoton (Neon Sign Turn On). Panels and cards get a box-shadow frame with an inset layer (Neon Border). Icons get a coloured drop-shadow so the glow follows the stroke. Buttons and toggles get neon as a state change, lit on hover or when on (Neon Button, Neon Toggle).
Match it to your stack
Plain CSS: stack two to four text-shadow layers from tight and pale to wide and coloured, as in the CSS-Tricks recipe. Tailwind v4.1 and later: text-shadow and drop-shadow colour utilities with opacity modifiers. Unsure of the values: tune them in the CSSmatic generator, then cut the layer count until the effect stops improving. Or copy a finished piece from the Neon Text collection.
Match it to the people looking at it
Flicker is the risky part. WCAG 2.3.1 (level A) forbids content that flashes more than three times in any one second unless it stays below the flash thresholds, and a full-screen neon sign that strobes can fail it. Keep flicker to a few irregular dips, on one element, playing once or rarely, and turn it off under prefers-reduced-motion. Check contrast for the text itself, not the halo.
Light up one sign tonight
Put your headline on a near-black background, set it in a rounded single-stroke font, and give it three shadows: `0 0 2px #fff`, `0 0 8px` in your colour, `0 0 24px` in your colour. That is a neon sign. If you want it to flicker, animate the opacity of one letter a couple of times every few seconds, and stop the animation for anyone who prefers reduced motion.
Copy any of the demos above from the Neon Text collection, or describe the sign you want and get production-ready CSS from the creator. For gradient light rather than tube light, see our gradient text examples.
Make a pure CSS neon sign headline on a near-black brick-coloured background. Use a rounded single-stroke font and three text-shadow layers: a 2px white core and 8px and 24px glows in hot pink. On load each letter flickers on once with its own small delay, finishing within 1.2 seconds, then stays lit. Animate only opacity, never the shadow values, and never flash more than three times per second. Under prefers-reduced-motion, show the lit sign with no animation.
Common questions
How do you make a neon effect in CSS?
Use a bright text colour on a dark background and stack several text-shadow values separated by commas: small blur radii in white or a pale tint for the core, then larger blur radii in the neon colour for the halo. The first shadow in the list is drawn on top. For boxes and buttons use box-shadow the same way, adding an inset shadow for light that spills inward.
How do you make CSS neon text flicker?
Add a keyframe animation that briefly drops the glow at a few uneven percentages, for example setting opacity lower or removing the shadow for a frame or two. The CSS-Tricks tutorial toggles the full text-shadow to none; animating the opacity of a separate glow layer is cheaper. Wrap it in a prefers-reduced-motion query that sets animation: none.
Is animated neon bad for performance?
Animating text-shadow or box-shadow values forces repaints every frame, and readers of the CSS-Tricks tutorial reported heavy CPU and GPU use on mobile. Keep the shadows static and animate opacity or transform of a glow layer instead, and limit the number of glowing elements on screen.
What font is best for neon text?
Rounded, single-weight stroke fonts look most like glass tubes. Free options on Google Fonts include Tilt Neon by Andy Clymer (a variable font with XROT and YROT axes), Monoton by Vernon Adams for multi-line retro signs, and Neonderthaw by Robert Leuschke for connected script signs.
Can a flickering neon effect cause seizures?
Rapid flashing can. WCAG 2.3.1 Three Flashes or Below Threshold (level A) says content must not flash more than three times in any one-second period unless it is below the general and red flash thresholds. Keep flicker slow, irregular and small, and respect prefers-reduced-motion.