Techniques
Embossed techbase bevel
The chunky beveled HUD-panel look: a rust-brown plate with a bright top inner highlight and a dark recessed bottom, like extruded metal.
.element {
background: linear-gradient(180deg, #2B2622 0%, #1D1815 100%);
border: 2px solid #7A4B2A;
border-radius: 3px;
box-shadow:
inset 0 1px 0 rgba(122, 75, 42, 0.6),
inset 0 -2px 5px rgba(0, 0, 0, 0.65),
0 4px 14px rgba(0, 0, 0, 0.7);
}
Glowing nukage pool
The radioactive toxic-waste accent surface: a saturated green field with a pulsing outer glow, used for active indicators and accent panels.
.element {
background: radial-gradient(ellipse at 50% 40%, #50FF00 0%, #26D406 55%, #157A05 100%);
color: #072E02;
box-shadow:
0 0 16px rgba(57, 255, 20, 0.55),
inset 0 0 12px rgba(0, 252, 0, 0.4);
animation: nukage-pulse 1.6s ease-in-out infinite;
}
@keyframes nukage-pulse {
0%, 100% { box-shadow: 0 0 14px rgba(57,255,20,0.45), inset 0 0 10px rgba(0,252,0,0.35); }
50% { box-shadow: 0 0 26px rgba(57,255,20,0.7), inset 0 0 16px rgba(0,252,0,0.55); }
}
Scanline + dither grain overlay
The shareware-era CRT texture: horizontal scanlines layered over a faint pixel-dither grain, draped across dark metal surfaces.
.element {
position: relative;
background-color: #161210;
}
.element::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image:
repeating-linear-gradient(0deg, rgba(0,0,0,0.28) 0px, rgba(0,0,0,0.28) 1px, transparent 1px, transparent 3px),
repeating-linear-gradient(90deg, rgba(57,255,20,0.04) 0px, rgba(57,255,20,0.04) 1px, transparent 1px, transparent 2px);
mix-blend-mode: overlay;
}