Light & surface · 2018–present
Neon Glow
Bright phosphorescent colours glowing against near-black — the electric buzz and colour bloom of a neon sign rendered in CSS.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 15 tokens
- --bg
oklch(9% 0.015 285) - --fg
oklch(94% 0.01 285) - --muted
oklch(62% 0.015 285) - --surface
oklch(13% 0.018 285) - --surface-2
oklch(17% 0.02 285) - --border
oklch(28% 0.02 285) - --accent
oklch(78% 0.28 340) - --accent-fg
oklch(10% 0.02 340) - --focus
oklch(78% 0.28 340)
| Token | Value |
|---|---|
| --font-body | 'Exo 2', ui-sans-serif, system-ui, sans-serif |
| --font-display | 'Exo 2', ui-sans-serif, system-ui, sans-serif |
| --radius | 6px |
| --radius-sm | 4px |
| --shadow | 0 2px 8px oklch(0% 0 0 / 0.65) |
| --shadow-lg | 0 16px 48px oklch(0% 0 0 / 0.85) |
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,400;0,600;0,700;1,400&display=swap');
:root {
--bg: oklch(9% 0.015 285);
--fg: oklch(94% 0.01 285);
--muted: oklch(62% 0.015 285);
--surface: oklch(13% 0.018 285);
--surface-2: oklch(17% 0.02 285);
--border: oklch(28% 0.02 285);
--accent: oklch(78% 0.28 340);
--accent-fg: oklch(10% 0.02 340);
--focus: oklch(78% 0.28 340);
--font-body: 'Exo 2', ui-sans-serif, system-ui, sans-serif;
--font-display: 'Exo 2', ui-sans-serif, system-ui, sans-serif;
--radius: 6px;
--radius-sm: 4px;
--shadow: 0 2px 8px oklch(0% 0 0 / 0.65);
--shadow-lg: 0 16px 48px oklch(0% 0 0 / 0.85);
}Where it came from
Origin: Neon sign aesthetics from Las Vegas and retro diners; synthwave revival
Neon signs experienced a design revival in the mid-2010s, partly driven by the synthwave and vaporwave aesthetic movements. CSS text-shadow and box-shadow with multiple layered glow values can simulate the light bloom of neon tubes. The look spread through gaming interfaces, nightlife brand sites, and Dribbble shots built around hot pink, cyan, and violet against very dark backgrounds.
How to spot it
- Near-black background — the glow needs darkness to read
- Bright accent colours with multi-layer glow: a tight core and a wide diffuse halo
- High saturation — hot pink, cyan, violet, or electric green
- Type that appears to emit light rather than reflect it
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Extremely atmospheric and immediately distinctive | Glow effects degrade text legibility at small sizes |
| Strong for nightlife, gaming, and entertainment contexts | Narrow emotional context — difficult to use for serious, document-heavy work |
| Near-black background is easy on OLED screens | Overused in gaming and crypto-adjacent design |
In the wild
- Nightclub and event website hero sections
- Gaming platform dashboards and overlays
- Synthwave-themed music visualisers and apps
Use it when
Entertainment, gaming, or nightlife products where atmosphere and energy are the product, and legibility can be traded for feel.