12 CSS Retro UI Designs06 / 12

Pure CSSMIT licensed

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. Monoton + Yatra One + Space Mono in pink/cyan/purple.

Published

Live Demo
Try it

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;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Retro UI Design from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Vaporwave Aesthetic Website Theme Design
Source: https://codefronts.com/design-styles/css-retro-designs/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. Monoton + Yatra One + Space Mono in pink/cyan/purple.
## HTML
```html
<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>
```
## CSS
```css
@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;
  }
}
```

Techniques used in this demo

mask-compositeMDN ↗3D transforms (perspective + preserve-3d)background-clip: textMDN ↗aspect-ratioMDN ↗filterMDN ↗backdrop-filterMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →