# Cyberpunk / neon

Also called: cyberpunk UI, neon UI, synthwave, glitch design, night city  
Era: 1982 Blade Runner visuals; web waves 2017 (synthwave) and 2020 (Cyberpunk 2077 marketing)  
Page: https://designforai.dev/style/cyberpunk-neon

## Traits

- near-black backgrounds with saturated neon: magenta, cyan, yellow, acid green
- glow via layered text-shadows and box-shadows in the same neon hue
- clipped corners (clip-path polygons), diagonal cuts, warning stripes
- glitch effects: RGB split, skew jitter, scanning lines
- monospace or condensed uppercase type with wide tracking, numeric codes everywhere
- HUD elements: brackets, crosshairs, status readouts
- fast, sharp motion with occasional flicker

Palette: #050507 page, #f0f0f0 text, #ff2a6d magenta, #05d9e8 cyan, #f9f002 yellow, #d1f7ff pale cyan for glow tint

Type: Orbitron or Rajdhani for headings (700, uppercase, 0.1em tracking), Share Tech Mono or JetBrains Mono for data, Barlow Condensed for body; headings 40-80px

## Do

- limit neon to two hues plus one warning yellow; three glows max on screen
- build glow with 3 stacked shadows (2px, 8px, 24px) in the same colour at falling alpha
- cut one corner of cards with clip-path: polygon() for the signature shape

## Don't

- do not glow body text; glow is for headings, borders and buttons only
- do not run glitch animations continuously; trigger on hover or once on load
- do not use rounded corners; angles and cuts only

Known for it: Cyberpunk 2077, Razer, Ghost in the Shell tie-ins, Corsair iCUE

## CSS seed

```css
:root{--bg:#050507; --fg:#f0f0f0; --accent:#ff2a6d; --accent2:#05d9e8; --warn:#f9f002; --radius:0; --glow:0 0 2px #05d9e8,0 0 8px #05d9e8,0 0 24px rgba(5,217,232,0.6); --font:'Orbitron',sans-serif}
```

## Prompt

Build the site in cyberpunk neon style. Background #050507 with a faint 48px grid (rgba(5,217,232,0.06) lines). Text #f0f0f0, neon magenta #ff2a6d, neon cyan #05d9e8, warning yellow #f9f002. Fonts: Orbitron 700 uppercase with 0.1em tracking for headings at 64/40/24px, Barlow Condensed 400 at 18px for body, Share Tech Mono 13px for codes, timestamps and labels. Cards: background #0b0b12, 1px border #05d9e8, one corner cut with clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%), box-shadow 0 0 2px #05d9e8, 0 0 8px #05d9e8, 0 0 24px rgba(5,217,232,0.5). Primary button #ff2a6d with the same glow recipe in magenta and a diagonal yellow-black warning stripe on its left edge. Headings get text-shadow 0 0 8px currentColor. Hero title runs a one-time 600ms glitch on load (skewX jitter and 2px RGB split via pseudo-elements) and repeats on hover. No border-radius anywhere. Motion fast: 120ms transitions.