Techniques
Win98 Bevelled Button
The canonical Windows 98 raised-button effect using inset box-shadows to simulate 3D plastic chrome.
.win98-button {
background: #C0C0C0;
border: none;
padding: 4px 16px;
font-family: 'DM Sans', 'Tahoma', sans-serif;
font-weight: 700;
font-size: 0.875rem;
color: #0A0A0A;
box-shadow: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #404040;
cursor: pointer;
}
.win98-button:active {
box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #FFFFFF;
}
JPEG Compression Artifact Overlay
A pseudo-element texture that simulates JPEG degradation on accent surfaces, using a repeating SVG noise pattern with reduced opacity.
.jpeg-artifact {
position: relative;
}
.jpeg-artifact::after {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='2' height='2' fill='%23FF77B7' opacity='0.08'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%2352E0E0' opacity='0.06'/%3E%3C/svg%3E") repeat;
mix-blend-mode: overlay;
pointer-events: none;
image-rendering: pixelated;
}
Vaporwave Gradient Panel
The signature purple-pink-cyan gradient applied as a page or hero background, with a CRT-scanline overlay for period authenticity.
.vaporwave-gradient {
background: linear-gradient(135deg, #8C52E0 0%, #FF77B7 50%, #52E0E0 100%);
position: relative;
}
.vaporwave-gradient::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 0, 0, 0.03) 2px,
rgba(0, 0, 0, 0.03) 4px
);
pointer-events: none;
}