Techniques
VHS Scanline Overlay
Applies CRT-style horizontal scanlines over any element, creating the signature VHS playback texture.
.vhs-scanlines {
position: relative;
}
.vhs-scanlines::after {
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;
z-index: 1;
}
Sunset Gradient Hero
The iconic purple-to-pink sunset gradient used as a dramatic hero background, evoking dead-mall twilight and 80s corporate video intros.
.sunset-gradient-hero {
background: linear-gradient(180deg, #1a0a2e 0%, #2d1b4e 30%, #4a1942 60%, #e84393 100%);
color: #f5d8e8;
position: relative;
}
.sunset-gradient-hero::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(255, 142, 200, 0.04) 2px,
rgba(255, 142, 200, 0.04) 4px
);
pointer-events: none;
}
Chromatic Aberration Text
RGB channel-split effect on display text, mimicking the color fringing of misaligned CRT tubes and VHS playback.
.chromatic-text {
font-family: 'Audiowide', sans-serif;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #ff8ec8;
text-shadow:
-2px 0 #b8e0f0,
2px 0 #ff8a9a,
0 0 20px rgba(255, 142, 200, 0.4);
}