Synthwave web design: neon on dark without losing the reader
Synthwave borrows the look of 1980s arcade cabinets, film posters and VHS covers: a dark ground, a magenta-to-orange sunset, a wireframe grid running to the horizon and neon type. It works on the web when the neon is reserved for a few elements and the reading text stays plain and high-contrast. Glow every surface and it becomes both tiring and generic.
Where the look comes from
Synthwave, also called retrowave or outrun, began as a music scene in the late 2000s that recreated the synthesiser sound of 1980s film and game soundtracks. Its visual language came along with it: the chrome logo, the sun cut into horizontal bands, the neon grid, palm silhouettes and the colours of an arcade at night. The look isn't a history lesson so much as a remembered version of the decade, and that's part of its appeal. Cyberpunk website design is a close cousin with a different mood: rain, city signage, glitch effects and acid green or cyan on black, closer to dystopian fiction than to nostalgia.
The visual vocabulary
| Element | On the web | Use it |
|---|---|---|
| Dark ground | Deep navy or near-black, not pure black | Everywhere |
| Sunset gradient | Magenta through coral to orange, in bands | Once: the hero or a single divider |
| Perspective grid | A CSS or SVG grid receding to a horizon line | Behind the hero only |
| Neon type | Thin bright strokes with layered text shadows | Headlines and the logo |
| Chrome lettering | A metallic gradient on bold display type | The logo or one title |
| Scanlines and VHS noise | A faint repeating overlay | Sparingly, never over body text |
Typography is usually a wide, geometric or condensed display face for headlines, sometimes italicised for speed, with a clean sans-serif for everything else. Keep the display face for short lines; it's rarely readable in paragraphs.
Neon 80s website design that stays readable
- Neon on type, not blocks. Layered
text-shadowbuilds a neon tube effect; MDN's text-shadow reference shows several shadows stacked in one declaration. Use it on a headline, not on cards and buttons. - Keep the letters solid. The glyph itself needs full contrast with the ground. The glow is extra, never the thing that makes the text visible.
- Plain body text. Off-white or pale grey on the dark ground, at 17px or more, no glow, no italics.
- One accent for actions. Pick the hottest colour (often hot pink or orange) for buttons and nothing else.
- No flicker by default. Real neon flickers; your headline shouldn't. WCAG's Three Flashes or Below Threshold criterion, at level A, rules out anything flashing more than three times a second, and slower flickers are still distracting.
- Respect reduced motion. Moving grids and drifting suns should stop under prefers-reduced-motion.
A themed glow versus the generic glow
Generated sites often put a soft violet halo under every button and card, on pages about accounting or dentistry. That's a tell: decoration with no reason. On a synthwave site the glow is the subject. The difference shows in how it's used. A retrowave website glows where a real neon sign would (the title, a line, an outline) and the rest is dark and calm. If every element glows, nothing stands out and it slides back into the generic look. See glow effects in web design for the distinction in detail.
Who it suits
Synthwave fits indie and retro games, electronic musicians and labels, club nights, arcade bars, esports events, merch shops and creative studios with a playful streak. It suits a launch page better than a long-lived business site, and it's a poor fit for anything where visitors need calm and trust first. For games specifically, see indie game websites.
Synthwave in Anticode
Afterglow Run, a synthwave arcade game, is in Anticode's template gallery. Like every template it's an app build designed and written by Anticode's model, not a page in one of the seven design systems; using it copies it into your project with no model call. For your own synthwave site or game, describe the look and ask for an app build: the model writes the whole program, with its own palette, type and animation.
On design-engine pages, the Critic flags coloured glows under buttons and cards, and none of the seven systems is built for neon. The publish gate refuses the stock purple-to-blue gradient on any build and requires reduced-motion support wherever something animates, so build the sunset from magenta, coral and orange over deep navy, and give the moving grid a still fallback.
Questions people ask
What colours are used in synthwave design?
A deep navy or near-black ground, with magenta, hot pink, coral, orange and cyan as neon accents, and a sunset gradient through the warm colours.
Are neon websites accessible?
They can be if the text itself has strong contrast, body copy has no glow, nothing flashes, and motion stops for people who ask for less.
What's the difference between synthwave and cyberpunk design?
Synthwave is warm nostalgia for the 1980s: sunsets, grids, chrome. Cyberpunk is a darker future city: glitches, signage, acid green and cyan.