Design Atlas
한국어
❖ Design styles

Synthwave

신스웨이브

A pink-and-purple sunset over a neon grid horizon in perspective — the 1980s' imagined future, replayed. Also the name of the synth-pop music genre it soundtracks.

Also known as: OutrunRetrowave
···
html
<div class="scene">
  <div class="sun"></div>
  <div class="grid"></div>
  <h1>SYNTHWAVE</h1>
</div>
css
.scene{position:relative;width:100%;height:100%;overflow:hidden;
  background:linear-gradient(180deg,#1a0e3d 0%,#5c1e6b 42%,#ff6a3d 72%,#2a0f3d 72%)}
.sun{position:absolute;left:50%;top:34%;width:38%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  background:linear-gradient(#ffd23f,#ff6a3d 55%,#ff2f8f);
  background:repeating-linear-gradient(180deg,#ffd23f 0 4%,#ff6a3d 4% 8%,transparent 8% 10%),
    radial-gradient(circle,#ffdd6a,#ff5b8a 70%);
  box-shadow:0 0 60px rgba(255,110,150,.6)}
.grid{position:absolute;left:0;right:0;bottom:0;height:46%;
  background-image:linear-gradient(rgba(255,80,220,.7) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,80,220,.7) 1px,transparent 1px);
  background-size:10% 16px,7% 100%;
  transform:perspective(220px) rotateX(58deg);transform-origin:bottom;
  animation:scroll 1.2s linear infinite}
@keyframes scroll{to{background-position:0 16px,0 0}}
h1{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);margin:0;color:#fff;
  font-family:"Arial Black",sans-serif;font-style:italic;font-weight:900;letter-spacing:.06em;
  font-size:clamp(16px,4.4vmin,26px);text-shadow:0 0 8px #ff5eea,0 0 20px #6a3dff}

This wasn't actually a style of the 1980s — it's a genre musicians built in the late 2000s, reinterpreting that decade's sci-fi films (Tron, Blade Runner) and VHS/arcade aesthetics as retro-futurism. The "Outrun" nickname comes from the 1986 racing game.

Visually the formula is a perspective grid floor narrowing toward the horizon, a giant setting sun with horizontal stripe bands behind it, strong neon pink/cyan/purple contrast, and bold italic logo type with an outline glow. In CSS, perspective plus transform: rotateX() tilts the grid floor, and a linear-gradient builds the sunset.

It suits music album art, game title screens and retro-themed event pages. It's easy to confuse with cyberpunk, since both live in dark neon — but synthwave carries a "warm" sunset mood, while cyberpunk carries a "cold" rain-soaked-city one.