Chase the sunset. Drive forever.
Five high-voltage colors that define the Outrun aesthetic. Magenta burns the horizon, purple rules the night sky, cyan cuts through the dark.
Gradient Combinations
Every component carries dual neon glows, perspective drives, and CRT-faithful feedback. No clean minimalism survives here.
Primary — Dual Neon Glow
Outline & Cyan
Size variants
Four named rules govern every Outrun interaction. Hover, click, and hold each demo to feel the neon difference.
Grid background shifts along the Y-axis via bg-position on hover/press, creating an infinite forward-motion illusion — like accelerating toward the horizon.
bg-position: 0 0px
Hover over the grid — the perspective floor accelerates toward you
Every hover state layers at least two neon shadow colors — magenta and cyan — producing the chromatic aberration of vintage arcade screens.
shadow: 0 0 20px #ff006e,
0 0 40px #00d4ffHover each button to see the dual-color neon chromatic split
On active/click, the element briefly flickers and depresses — mimicking the tactile response of vintage CRT button hardware. Short, brutal, satisfying.
active:bg-[#ff006e]/20
animation: flicker 60ms step-startClick the button — notice the screen flicker and brief press-down replicating CRT hardware feedback
Cards lift slightly and grow a bottom neon light bar on hover — evoking a car cresting a hill toward the glowing horizon. Combined with perspective, adds depth and motion.
hover:-translate-y-2
border-b: glow stripHover each car card — it lifts and the bottom horizon glow lights up
A retro racing interface showing Outrun components in context — neon meters, speed readouts, and sunset status displays.
Route 80 — Endless Highway
Best Lap
Rivals
Distance
72% to checkpoint
Outrun has strict rules. Break one and you lose the aesthetic entirely. These boundaries define the entire visual language.
Orange-pink-purple sky, always
The defining gradient runs from sunset orange through magenta and into deep purple. This is non-negotiable for any background — the color of the 80s freeway at dusk.
Magenta + cyan always dual
Glow effects must always use at least two neon layers. Single-color glows look flat and wrong. The chromatic split between magenta and cyan is the signature.
Perspective grid mandatory
The receding grid floor is core to the style. It must use rotateX perspective, not flat patterns. And it must animate — static grids lose all sense of speed.