Design Atlas
한국어
❖ Design styles

Cyberpunk

사이버펑크

Neon magenta and cyan on a dark background, scanlines, glitch — the "high tech, low life" sci-fi subgenre translated to screen.

Also known as: Cyberpunk UITech noir
···
html
<div class="hud">
  <div class="scan"></div>
  <span class="tag">SYS//ONLINE</span>
  <h1 id="title">ACCESS</h1>
  <div class="bar"><i></i></div>
</div>
css
.hud{position:relative;width:min(88%,320px);padding:22px;background:#0a0a12;overflow:hidden;
  clip-path:polygon(0 0,92% 0,100% 16%,100% 100%,8% 100%,0 84%);
  border:1px solid #2fe0ff;box-shadow:0 0 18px rgba(47,224,255,.35),inset 0 0 20px rgba(255,0,200,.08)}
.scan{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px);
  animation:roll 6s linear infinite}
@keyframes roll{to{background-position:0 60px}}
.tag{font:700 10px/1 ui-monospace,monospace;color:#2fe0ff;letter-spacing:.16em}
h1{margin:10px 0 16px;font-family:"Arial Black",sans-serif;font-size:clamp(24px,6vmin,34px);
  letter-spacing:.05em;color:#fff;text-shadow:0 0 8px #ff2fd0}
h1.glitch{animation:gl .22s steps(3) 2}
@keyframes gl{
  0%{clip-path:inset(0 0 0 0)}
  20%{transform:translate(-3px,0);text-shadow:2px 0 #ff2fd0,-2px 0 #2fe0ff}
  40%{transform:translate(3px,0);text-shadow:-2px 0 #ff2fd0,2px 0 #2fe0ff}
  60%{transform:translate(-2px,0)}
  100%{transform:translate(0,0);text-shadow:0 0 8px #ff2fd0}
}
.bar{height:4px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;width:30%;background:linear-gradient(90deg,#2fe0ff,#ff2fd0);
  animation:load 2.4s ease-in-out infinite}
@keyframes load{0%{width:10%}50%{width:88%}100%{width:10%}}
js
const h1 = document.getElementById('title');
setInterval(() => {
  h1.classList.remove('glitch');
  void h1.offsetWidth;
  h1.classList.add('glitch');
}, 1800);

William Gibson's novel Neuromancer (1984) and the film Blade Runner (1982) are its origin. A future ruled by megacorporations, with inequality and a black market underneath, carries straight into the visual language — glossy neon signage against wet, decaying back alleys.

As a UI style, the HUD (head-up display) look popularized by the game Cyberpunk 2077 has become standard: clipped-corner rectangles (built with clip-path), repeating scanline patterns, and text that glitches out of alignment for an instant. Colors run dark navy or black backgrounds with magenta and cyan neon, often mixed with decorative Japanese or Chinese characters.

It fits game UIs, tech conference sites and hackathon landing pages. Its palette overlaps with synthwave, but cyberpunk carries a colder, sharper, dystopian-tech mood — and heavy glitching that hurts text legibility should be avoided anywhere information actually needs to be read.