12 CSS Retro UI Designs 06 / 12

Vaporwave Aesthetic Website Theme Design

A vaporwave scene assembled from CSS masks and gradients only — a halftone striped sun bobbing on the horizon, an infinite scrolling neon perspective grid floor, chrome gradient-clip title type with a glitch shudder, and a translucent retro window card.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="ret-06">
  <div class="ret-06__sun"></div>
  <div class="ret-06__floor"></div>

  <div class="ret-06__card">
    <div class="ret-06__jp">ヴェイパーウェイヴ</div>
    <h1 class="ret-06__title">A E S T H E T I C</h1>
    <div class="ret-06__sub">mall softnone · <b>1992</b> · neon dreams</div>

    <div class="ret-06__win">
      <div class="ret-06__winbar"><i></i><i></i><i></i><span>system32 / vibes.exe</span></div>
      <div class="ret-06__wincontent">
        Chrome type, a halftone <b>sun</b>, and an infinite neon grid floor —
        the whole scene is layered CSS gradients and masks. No images.
        The grid scrolls on a linear keyframe; the sun bobs on the horizon.
        <div class="ret-06__row">
          <a href="#" class="ret-06__btn">Enter Mall</a>
          <a href="#" class="ret-06__btn ret-06__btn--p">Play Tape</a>
        </div>
      </div>
    </div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Monoton&family=Yatra+One&family=Space+Mono:wght@400;700&display=swap');

.ret-06, .ret-06 *, .ret-06 *::before, .ret-06 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ret-06 ::selection{background:#ff71ce;color:#1a0b2e}

.ret-06{
  --pink:#ff71ce;
  --cyan:#05ffa1;
  --blue:#01cdfe;
  --purple:#b967ff;
  --deep:#1a0b2e;
  --sun1:#ffd319;
  --sun2:#ff2975;
  font-family:'Space Mono',monospace;
  background:linear-gradient(180deg,#2b1055 0%,#7a2a8f 45%,#ff2975 75%,#ffd319 100%);
  min-height:100vh;
  position:relative;
  overflow:hidden;
  color:#fff;
  display:grid;place-items:center;
  padding:clamp(16px,4vw,40px);
}
/* sun */
.ret-06__sun{position:absolute;top:8%;left:50%;transform:translateX(-50%);width:min(340px,70vw);aspect-ratio:1;border-radius:50%;
  background:linear-gradient(180deg,var(--sun1),var(--sun2));z-index:0;
  -webkit-mask:repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 20px),linear-gradient(180deg,transparent 52%,#000 52%);
  mask:repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 20px),linear-gradient(180deg,transparent 52%,#000 52%);
  -webkit-mask-composite:source-out;mask-composite:subtract;
  filter:drop-shadow(0 0 60px rgba(255,41,117,.6));animation:ret-06-rise 6s ease-in-out infinite alternate}
@keyframes ret-06-rise{to{transform:translateX(-50%) translateY(-14px)}}
.ret-06__sun::after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(180deg,var(--sun1),var(--sun2));z-index:-1;-webkit-mask:linear-gradient(180deg,#000 52%,transparent 52%);mask:linear-gradient(180deg,#000 52%,transparent 52%)}

/* perspective grid floor */
.ret-06__floor{position:absolute;left:-25%;right:-25%;bottom:0;height:48%;z-index:0;
  background-image:linear-gradient(var(--cyan) 2px,transparent 2px),linear-gradient(90deg,var(--cyan) 2px,transparent 2px);
  background-size:48px 48px;
  transform:perspective(340px) rotateX(72deg);transform-origin:bottom;
  opacity:.55;animation:ret-06-grid 1.4s linear infinite}
@keyframes ret-06-grid{to{background-position:0 48px}}
.ret-06__floor::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--deep) 0%,transparent 40%)}

/* chrome title card */
.ret-06__card{position:relative;z-index:3;text-align:center;max-width:680px}
.ret-06__jp{font-family:'Yatra One',cursive;font-size:1.1rem;letter-spacing:.5em;color:var(--cyan);opacity:.9;margin-bottom:10px;text-shadow:0 0 10px var(--cyan)}
.ret-06__title{font-family:'Monoton';font-size:clamp(2.6rem,12vw,6rem);line-height:1;letter-spacing:.02em;
  background:linear-gradient(180deg,#fff 10%,#cdebff 38%,var(--blue) 50%,#fff 52%,var(--pink) 80%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(3px 3px 0 var(--pink)) drop-shadow(-2px -2px 0 var(--cyan));
  animation:ret-06-glitch 4s steps(1) infinite}
@keyframes ret-06-glitch{0%,90%,100%{transform:none}92%{transform:translate(-3px,1px) skewX(-3deg)}94%{transform:translate(3px,-1px)}}
.ret-06__sub{margin-top:18px;font-size:.84rem;letter-spacing:.3em;text-transform:uppercase;color:#fff;text-shadow:0 0 8px var(--pink)}
.ret-06__sub b{color:var(--cyan)}

.ret-06__win{margin-top:30px;background:rgba(26,11,46,.55);backdrop-filter:blur(8px);
  border:2px solid var(--pink);border-radius:6px;text-align:left;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 0 30px rgba(255,113,206,.5),8px 8px 0 rgba(1,205,254,.4)}
.ret-06__winbar{display:flex;align-items:center;gap:8px;background:linear-gradient(90deg,var(--purple),var(--pink));padding:7px 12px;border-radius:4px 4px 0 0}
.ret-06__winbar i{width:12px;height:12px;border-radius:50%;background:#fff;opacity:.85}
.ret-06__winbar span{margin-left:6px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.ret-06__wincontent{padding:18px 20px;font-size:.82rem;line-height:1.7;color:#e9d5ff}
.ret-06__wincontent b{color:var(--cyan)}
.ret-06__row{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.ret-06__btn{flex:1;min-width:130px;text-align:center;text-decoration:none;padding:11px;border:2px solid var(--cyan);color:var(--cyan);
  font-weight:700;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;background:rgba(5,255,161,.06);
  box-shadow:0 0 14px rgba(5,255,161,.3);transition:.25s}
.ret-06__btn:hover{background:var(--cyan);color:var(--deep);box-shadow:0 0 26px var(--cyan)}
.ret-06__btn--p{border-color:var(--pink);color:var(--pink);background:rgba(255,113,206,.06);box-shadow:0 0 14px rgba(255,113,206,.3)}
.ret-06__btn--p:hover{background:var(--pink);color:var(--deep);box-shadow:0 0 26px var(--pink)}

@media (prefers-reduced-motion: reduce){.ret-06__sun,.ret-06__floor,.ret-06__title{animation:none !important}}

More from 12 CSS Retro UI Designs

8 Bit Pixel Art UI Elements & ButtonsNeo Brutalist UI Components ExamplesRetro Cassette Player UI Web ComponentRetro Arcade Game UI Kit90s Website Guestbook WidgetY2K Style Web UI KitRetro Clothing Store Web UI DesignASCII Art Web Interface CodeRetro Desktop Portfolio Website TemplateRetro Windows 95 UI (CSS Template)Retro Futuristic Terminal UI Code
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →