Creating High-Tech, Low-Life Visual Experiences
The Aesthetic: Cyberpunk is more than neon lights and glitch effects. It's a visual language that speaks to our relationship with technology—simultaneously utopian and dystopian, beautiful and broken. This article breaks down the principles behind creating authentic cyberpunk interfaces.
Cyberpunk thrives on the tension between pristine technology and decayed infrastructure. Use harsh lighting, deep shadows, and intentional imperfections.
// High contrast color scheme
:root {
--bg-deep: #050505;
--bg-card: #0c0c0c;
--text-main: #ffffff;
--text-dim: #94a3b8;
--accent-cyan: #00f3ff;
--accent-magenta: #ff00f3;
--accent-yellow: #f3ff00;
}
body {
background: var(--bg-deep);
color: var(--text-main);
font-weight: 600;
}
Neon colors should serve a purpose—they're not just decoration, they're information hierarchy:
// Scanline overlay
body::before {
content: " ";
display: block;
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;
background: linear-gradient(
rgba(18, 16, 16, 0) 50%,
rgba(0, 0, 0, 0.15) 50%
);
background-size: 100% 3px;
z-index: 1000;
pointer-events: none;
}
// CRT flicker
@keyframes flicker {
0%, 100% { opacity: 1; }
41% { opacity: 0.98; }
42% { opacity: 0.9; }
43% { opacity: 0.95; }
45% { opacity: 0.99; }
46% { opacity: 0.94; }
}
.neon-flicker {
animation: flicker 4s infinite;
}
Glitch effects shouldn't be random—they should communicate instability, corruption, or system stress:
// Controlled glitch effect
@keyframes glitch {
0% { transform: translate(0); }
20% { transform: translate(-2px, 2px); }
40% { transform: translate(-2px, -2px); }
60% { transform: translate(2px, 2px); }
80% { transform: translate(2px, -2px); }
100% { transform: translate(0); }
}
.glitch-on-hover:hover {
animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
// Text glitch with data attribute
.glitch {
position: relative;
}
.glitch::before,
.glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.glitch::before {
left: 2px;
text-shadow: -1px 0 #ff00f3;
clip: rect(24px, 550px, 90px, 0);
animation: glitch-anim 3s infinite linear alternate-reverse;
}
.glitch::after {
left: -2px;
text-shadow: -1px 0 #00f3ff;
clip: rect(85px, 550px, 140px, 0);
animation: glitch-anim 2s infinite linear alternate-reverse;
}
// Holographic shimmer effect
@keyframes holo-shimmer {
0% {
background-position: -200% center;
}
100% {
background-position: 200% center;
}
}
.holo-shimmer {
background: linear-gradient(
90deg,
transparent 0%,
rgba(0, 243, 255, 0.1) 50%,
transparent 100%
);
background-size: 200% 100%;
animation: holo-shimmer 3s ease-in-out infinite;
}
Cyberpunk typography needs to feel technical but readable:
// Font stack
:root {
--font-display: 'Orbitron', sans-serif;
--font-body: 'Rajdhani', sans-serif;
--font-mono: 'Share Tech Mono', monospace;
}
// Display typography
h1, h2, h3 {
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.05em;
}
// Technical typography
.code, .terminal {
font-family: var(--font-mono);
font-size: 0.9em;
line-height: 1.6;
}
// Cyber button styles
.cyber-button {
background: transparent;
border: 2px solid var(--accent-cyan);
color: var(--accent-cyan);
padding: 12px 24px;
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.cyber-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: var(--accent-cyan);
transition: all 0.3s ease;
z-index: -1;
}
.cyber-button:hover {
color: #000;
}
.cyber-button:hover::before {
left: 0;
}
// Pulse animation for CTAs
@keyframes pulse {
0%, 100% {
box-shadow: 0 0 5px var(--accent-cyan),
0 0 10px var(--accent-cyan);
}
50% {
box-shadow: 0 0 20px var(--accent-cyan),
0 0 30px var(--accent-cyan);
}
}
.pulse {
animation: pulse 2s ease-in-out infinite;
}
// Information card
.data-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 24px;
position: relative;
}
.data-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(--accent-cyan);
}
.data-card.alert::before {
background: var(--accent-magenta);
}
Cyberpunk effects can be expensive. Optimize with:
// Performance optimizations
.glitch {
will-change: clip, transform;
}
@media (prefers-reduced-motion: reduce) {
.glitch,
.neon-flicker,
.holo-shimmer {
animation: none !important;
}
}
Cyberpunk shouldn't mean inaccessible:
// Accessible focus states
.cyber-button:focus-visible {
outline: 3px solid var(--accent-yellow);
outline-offset: 2px;
}
// High contrast mode support
@media (prefers-contrast: high) {
:root {
--border: rgba(0, 243, 255, 0.5);
}
}
// Readable text
body {
font-size: clamp(16px, 2vw, 20px);
line-height: 1.6;
max-width: 70ch;
}
Great cyberpunk design balances style with substance. Every glitch, every neon light, every scanline should serve a purpose. It's not about making things look broken—it's about showing the beauty in the breakdown.
The best cyberpunk interfaces feel like they're barely holding together—and that's exactly the point.