20 CSS Neon Text Effects
08 / 20

All 20 in 20 CSS Neon Text Effects

  1. 01Neon Glow Button Hover Effect
  2. 02Neon Flashing "Order Now" Sign Text
  3. 03Cyberpunk CTA Button Glow
  4. 04Pulse-Glow Text Notification
  5. 0580s Retro Synthwave Neon Text
  6. 06Realistic Flickering Neon Sign
  7. 07Google-Fonts Neon Pairing
  8. 08Minimalist Dark-Mode Header Glow
  9. 09Neon Text Outline Stroke Animation
  10. 10Neon Digital Clock LED Glow
  11. 11Synchronized Box-Shadow + Text Glow
  12. 12Multi-Colour Neon Text Effect
  13. 13Pure-CSS Neon Text (No JavaScript)
  14. 14CSS Variables Dynamic Neon Colour
  15. 15Low-INP Compositor Neon Animation
  16. 16Tailwind Neon Text-Glow Utility
  17. 17Neon Glitch Cyberpunk Text
  18. 18Interactive Neon On/Off Sign Switch
  19. 19Animated Gradient-Flow Neon Text
  20. 20Neon Typing / Loading Terminal
Pure CSSMIT licensed

Minimalist Dark-Mode Header Glow

The restrained, high-end SaaS take on neon: no storefront flash, just a faint premium halo behind clean type so a dark-mode hero feels lit-from-within. What upmarket product designers search for instead of 'neon'.

Live Demo
Try it

Build interactive UI like this from scratch: 20 HTML, CSS & JavaScript projects

ZTM · JavaScript Web Projects · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code
Check ZTM Course

The code

<div class="cnt-08">
  <header class="cnt-08__hero">
    <p class="cnt-08__eyebrow">Introducing v3</p>
    <h2 class="cnt-08__h">Ship dark-mode UI that feels <span class="cnt-08__hi">lit from within</span></h2>
    <p class="cnt-08__lead">A premium halo — not a storefront. Faint, cool, and completely composited.</p>
  </header>
</div>
.cnt-08,
.cnt-08 *,
.cnt-08 *::before,
.cnt-08 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cnt-08 ::selection {
  background: oklch(0.78 0.12 230);
  color: #04101a;
}

.cnt-08 {
  --halo: oklch(0.9 0.03 240);
  --accent: oklch(0.8 0.13 230);
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background: radial-gradient(60% 60% at 50% 38%,#141821,#0d1117 70%);
}

.cnt-08__hero {
  max-width: 640px;
  text-align: center;
}

.cnt-08__eyebrow {
  font: 12px ui-monospace,Menlo,monospace;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
  text-shadow: 0 0 12px color-mix(in oklch,var(--accent) 55%,transparent);
}

.cnt-08__h {
  font-size: clamp(30px,5.4vw,52px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: #f2f5fa;
  text-wrap: balance;
  text-shadow: 0 0 1px rgba(255,255,255,.4),0 0 22px rgba(220,232,255,.14),0 0 60px color-mix(in oklch,var(--halo) 22%,transparent);
}

.cnt-08__hi {
  color: var(--accent);
  text-shadow: 0 0 8px color-mix(in oklch,var(--accent) 60%,transparent),0 0 28px color-mix(in oklch,var(--accent) 40%,transparent);
  border-bottom: 2px solid transparent;
  background: linear-gradient(90deg,transparent,var(--accent),transparent) bottom/100% 2px no-repeat;
}

.cnt-08__lead {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.6;
  color: #9aa4b4;
}

@media (prefers-reduced-motion: reduce) {
}
/* No JavaScript — a deliberately static, faint premium halo. */
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Neon Text Effect from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Minimalist Dark-Mode Header Glow
Source: https://codefronts.com/motion/css-neon-text-effect/minimalist-dark-mode-header-glow/

The restrained, high-end SaaS take on neon: no storefront flash, just a faint premium halo behind clean type so a dark-mode hero feels lit-from-within. What upmarket product designers search for instead of 'neon'.
## HTML
```html
<div class="cnt-08">
  <header class="cnt-08__hero">
    <p class="cnt-08__eyebrow">Introducing v3</p>
    <h2 class="cnt-08__h">Ship dark-mode UI that feels <span class="cnt-08__hi">lit from within</span></h2>
    <p class="cnt-08__lead">A premium halo — not a storefront. Faint, cool, and completely composited.</p>
  </header>
</div>
```
## CSS
```css
.cnt-08,
.cnt-08 *,
.cnt-08 *::before,
.cnt-08 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cnt-08 ::selection {
  background: oklch(0.78 0.12 230);
  color: #04101a;
}

.cnt-08 {
  --halo: oklch(0.9 0.03 240);
  --accent: oklch(0.8 0.13 230);
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background: radial-gradient(60% 60% at 50% 38%,#141821,#0d1117 70%);
}

.cnt-08__hero {
  max-width: 640px;
  text-align: center;
}

.cnt-08__eyebrow {
  font: 12px ui-monospace,Menlo,monospace;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
  text-shadow: 0 0 12px color-mix(in oklch,var(--accent) 55%,transparent);
}

.cnt-08__h {
  font-size: clamp(30px,5.4vw,52px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: #f2f5fa;
  text-wrap: balance;
  text-shadow: 0 0 1px rgba(255,255,255,.4),0 0 22px rgba(220,232,255,.14),0 0 60px color-mix(in oklch,var(--halo) 22%,transparent);
}

.cnt-08__hi {
  color: var(--accent);
  text-shadow: 0 0 8px color-mix(in oklch,var(--accent) 60%,transparent),0 0 28px color-mix(in oklch,var(--accent) 40%,transparent);
  border-bottom: 2px solid transparent;
  background: linear-gradient(90deg,transparent,var(--accent),transparent) bottom/100% 2px no-repeat;
}

.cnt-08__lead {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.6;
  color: #9aa4b4;
}

@media (prefers-reduced-motion: reduce) {
}
```

## JavaScript
```js
/* No JavaScript — a deliberately static, faint premium halo. */
```

How this works

Instead of saturated tubes, the headline gets a whisper-soft, low-opacity text-shadow in a near-white cool tint plus one faint accent layer — enough to lift it off the charcoal, not enough to look like a sign. A thin gradient underline and an oklch accent on a single word carry all the colour.

The section background is a barely-there radial 'spotlight' behind the copy, so the glow feels like ambient product lighting. This is the pattern to reach for when 'neon' would look cheap but the page still needs a dark-mode focal point.

Make it yours

  • Keep it subtle: raise the halo opacity only a few percent at a time — the whole point is restraint.
  • Move the accent to a different word by wrapping it in .cnt-08__hi.
  • Cool vs warm: shift --halo toward blue for tech, toward amber for premium/warm brands.
  • Reuse the faint-halo recipe on nav links and buttons for a coherent lit-dark-mode system.

Gotchas — read before shipping

  • Contrast still matters — a faint halo doesn't excuse low text contrast; keep the base text near-white on charcoal.
  • Don't animate this one; a breathing premium header undercuts the restraint it's going for.
  • On OLED true-black the halo reads stronger than on #0d1117 — test on the background you'll actually ship.

Browser support

ChromeSafariFirefoxEdge
114+17.5+121+114+

Floor set by oklch(), color-mix(), text-wrap as this demo is written. The core technique itself goes back further — Chrome 80+.

Plain text-shadow + gradient underline — universal support.

Techniques used in this demo

text-wrap: prettyMDN ↗radial-gradient()MDN ↗color-mix()MDN ↗clamp()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →