12 CSS Retro UI Designs02 / 12

Pure CSSMIT licensed

Retro Futuristic Terminal UI Code

A boot-sequence CRT terminal with curved glass: layered scanlines, rolling interlace, vignette curvature, phosphor glow and a flicker keyframe, plus staggered line-by-line teletype reveal and a blinking block cursor. Share Tech Mono / Orbitron on deep green, ANSI-coloured output and ASCII headline — zero JS.

Published

Live Demo
Try it

The code

<div class="ret-02">
  <div class="ret-02__crt">
    <div class="ret-02__glow"></div>
    <div class="ret-02__scr">
      <div class="ret-02__head">
        <span>[ <b>NEXUS//OS</b> v9.84 ]</span>
        <span class="dim">NODE 0xFA · SECURE LINK · 1984 baud</span>
      </div>

      <div class="ret-02__ascii">  _   _ _____ __  __ _   _ ____
 | \ | | ____|  \/  | | | / ___|
 |  \| |  _| | |\/| | | | \___ \
 | |\  | |___| |  | | |_| |___) |
 |_| \_|_____|_|  |_|\___/|____/</div>

      <span class="ret-02__l"><span class="dim">user@nexus:~$</span> ./boot --diagnostic</span>
      <span class="ret-02__l">[<span class="ret-02__ok">OK</span>] mounting /dev/neural0 ............ <span class="cy">linked</span></span>
      <span class="ret-02__l">[<span class="ret-02__ok">OK</span>] decrypting handshake <span class="amb">RSA-4096</span> ... <span class="cy">verified</span></span>
      <span class="ret-02__l">[<span class="ret-02__ok">OK</span>] uplink to <span class="amb">ORBITAL-7</span> .......... <span class="cy">stable</span></span>
      <span class="ret-02__l"><span class="dim">     phosphor calibration</span></span>
      <span class="ret-02__l">     <span class="ret-02__bar">▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰</span><span class="dim">▱▱</span>  92%</span>
      <span class="ret-02__l"> </span>
      <span class="ret-02__l"><span class="amb">WARNING:</span> reality buffer overflow in sector 7G.</span>
      <span class="ret-02__l"><span class="dim">// the green glow is real phosphor decay, faked in pure CSS:</span></span>
      <span class="ret-02__l"><span class="dim">// scanlines + vignette + flicker keyframes, layered on glass.</span></span>
      <span class="ret-02__l">Awaiting input<span class="dim"> — type a command, jack in.</span></span>

      <div class="ret-02__prompt">
        <b>user@nexus:~$</b><span class="ret-02__cursor"></span>
      </div>
    </div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@500;700;900&display=swap');

.ret-02,
.ret-02 *,
.ret-02 *::before,
.ret-02 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.ret-02 ::selection {
  background: #00ff9c;
  color: #02110a;
}

.ret-02 ::-moz-selection {
  background: #00ff9c;
  color: #02110a;
}

.ret-02 {
  --bg: #030806;
  --green: #27ff9c;
  --dim: #13895a;
  --amber: #ffb000;
  --cyan: #21e6ff;
  --scan: rgba(0,0,0,.28);
  font-family: 'Share Tech Mono',monospace;
  background: radial-gradient(120% 120% at 50% 0%,#06170f,#020604 70%);
  color: var(--green);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(14px,3vw,40px);
}
/* the CRT glass: curvature via radial vignette + scanlines + flicker */

.ret-02__crt {
  position: relative;
  height: calc(100vh - clamp(28px,6vw,80px));
  border-radius: 26px;
  padding: clamp(16px,3vw,38px);
  background: linear-gradient(180deg,rgba(39,255,156,.04),transparent),var(--bg);
  box-shadow: inset 0 0 120px rgba(39,255,156,.12),inset 0 0 30px rgba(0,0,0,.9),0 0 0 3px #0b1f16,0 0 0 9px #050d09,0 30px 80px rgba(0,0,0,.8);
  overflow: hidden;
}

.ret-02__crt::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  background: repeating-linear-gradient(0deg,transparent 0 2px,var(--scan) 2px 4px);
  mix-blend-mode: multiply;
  animation: ret-02-roll 8s linear infinite;
}

@keyframes ret-02-roll {
  to {
    background-position: 0 200px;
  }
}

.ret-02__crt::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  border-radius: 26px;
  background: radial-gradient(120% 120% at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%);
  box-shadow: inset 0 0 90px rgba(0,0,0,.7);
}

.ret-02__glow {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  animation: ret-02-flick 5s infinite;
  mix-blend-mode: screen;
  background: linear-gradient(180deg,rgba(39,255,156,.03),transparent);
}

@keyframes ret-02-flick {
  0%,
    96%,
    100% {
    opacity: 1;
  }

  97% {
    opacity: .78;
  }

  98% {
    opacity: .92;
  }
}

.ret-02__scr {
  position: relative;
  z-index: 6;
  height: 100%;
  overflow-y: auto;
  font-size: clamp(13px,1.6vw,16px);
  line-height: 1.7;
  text-shadow: 0 0 6px rgba(39,255,156,.6);
}

.ret-02__scr::-webkit-scrollbar {
  width: 8px;
}

.ret-02__scr::-webkit-scrollbar-thumb {
  background: var(--dim);
}

.ret-02__head {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px dashed var(--dim);
  padding-bottom: 10px;
  margin-bottom: 14px;
  color: var(--dim);
}

.ret-02__head b {
  font-family: 'Orbitron';
  color: var(--green);
  letter-spacing: .2em;
  font-weight: 900;
  font-size: 1.1em;
}

.ret-02__l {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  opacity: 0;
  transform: translateY(2px);
  animation: ret-02-type .01s forwards;
}

.ret-02__l:nth-child(1) {
  animation-delay: .1s;
}

.ret-02__l:nth-child(2) {
  animation-delay: .35s;
}

.ret-02__l:nth-child(3) {
  animation-delay: .6s;
}

.ret-02__l:nth-child(4) {
  animation-delay: .85s;
}

.ret-02__l:nth-child(5) {
  animation-delay: 1.15s;
}

.ret-02__l:nth-child(6) {
  animation-delay: 1.5s;
}

.ret-02__l:nth-child(7) {
  animation-delay: 1.8s;
}

.ret-02__l:nth-child(8) {
  animation-delay: 2.1s;
}

.ret-02__l:nth-child(9) {
  animation-delay: 2.45s;
}

.ret-02__l:nth-child(10) {
  animation-delay: 2.8s;
}

.ret-02__l:nth-child(11) {
  animation-delay: 3.1s;
}

@keyframes ret-02-type {
  to {
    opacity: 1;
    transform: none;
  }
}

.ret-02 .amb {
  color: var(--amber);
  text-shadow: 0 0 6px rgba(255,176,0,.6);
}

.ret-02 .cy {
  color: var(--cyan);
  text-shadow: 0 0 6px rgba(33,230,255,.6);
}

.ret-02 .dim {
  color: var(--dim);
  text-shadow: none;
}

.ret-02__ok {
  color: #02110a;
  background: var(--green);
  padding: 0 6px;
}

.ret-02__bar {
  display: inline-block;
  color: var(--green);
}

.ret-02__ascii {
  color: var(--dim);
  font-size: clamp(8px,1.2vw,12px);
  line-height: 1.15;
  white-space: pre;
  margin: 6px 0 10px;
}

.ret-02__prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  border-top: 1px dashed var(--dim);
  padding-top: 12px;
}

.ret-02__prompt b {
  color: var(--amber);
}

.ret-02__cursor {
  width: 10px;
  height: 1.1em;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: ret-02-blink 1s steps(2) infinite;
}

@keyframes ret-02-blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ret-02__crt::before,
    .ret-02__glow,
    .ret-02__cursor,
    .ret-02__l {
    animation: none !important;
    opacity: 1 !important;
    transform: 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: Retro Futuristic Terminal UI Code
Source: https://codefronts.com/design-styles/css-retro-designs/retro-futuristic-terminal-ui-code/

A boot-sequence CRT terminal with curved glass: layered scanlines, rolling interlace, vignette curvature, phosphor glow and a flicker keyframe, plus staggered line-by-line teletype reveal and a blinking block cursor. Share Tech Mono / Orbitron on deep green, ANSI-coloured output and ASCII headline — zero JS.
## HTML
```html
<div class="ret-02">
  <div class="ret-02__crt">
    <div class="ret-02__glow"></div>
    <div class="ret-02__scr">
      <div class="ret-02__head">
        <span>[ <b>NEXUS//OS</b> v9.84 ]</span>
        <span class="dim">NODE 0xFA · SECURE LINK · 1984 baud</span>
      </div>

      <div class="ret-02__ascii">  _   _ _____ __  __ _   _ ____
 | \ | | ____|  \/  | | | / ___|
 |  \| |  _| | |\/| | | | \___ \
 | |\  | |___| |  | | |_| |___) |
 |_| \_|_____|_|  |_|\___/|____/</div>

      <span class="ret-02__l"><span class="dim">user@nexus:~$</span> ./boot --diagnostic</span>
      <span class="ret-02__l">[<span class="ret-02__ok">OK</span>] mounting /dev/neural0 ............ <span class="cy">linked</span></span>
      <span class="ret-02__l">[<span class="ret-02__ok">OK</span>] decrypting handshake <span class="amb">RSA-4096</span> ... <span class="cy">verified</span></span>
      <span class="ret-02__l">[<span class="ret-02__ok">OK</span>] uplink to <span class="amb">ORBITAL-7</span> .......... <span class="cy">stable</span></span>
      <span class="ret-02__l"><span class="dim">     phosphor calibration</span></span>
      <span class="ret-02__l">     <span class="ret-02__bar">▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰</span><span class="dim">▱▱</span>  92%</span>
      <span class="ret-02__l"> </span>
      <span class="ret-02__l"><span class="amb">WARNING:</span> reality buffer overflow in sector 7G.</span>
      <span class="ret-02__l"><span class="dim">// the green glow is real phosphor decay, faked in pure CSS:</span></span>
      <span class="ret-02__l"><span class="dim">// scanlines + vignette + flicker keyframes, layered on glass.</span></span>
      <span class="ret-02__l">Awaiting input<span class="dim"> — type a command, jack in.</span></span>

      <div class="ret-02__prompt">
        <b>user@nexus:~$</b><span class="ret-02__cursor"></span>
      </div>
    </div>
  </div>
</div>
```
## CSS
```css
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@500;700;900&display=swap');

.ret-02,
.ret-02 *,
.ret-02 *::before,
.ret-02 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.ret-02 ::selection {
  background: #00ff9c;
  color: #02110a;
}

.ret-02 ::-moz-selection {
  background: #00ff9c;
  color: #02110a;
}

.ret-02 {
  --bg: #030806;
  --green: #27ff9c;
  --dim: #13895a;
  --amber: #ffb000;
  --cyan: #21e6ff;
  --scan: rgba(0,0,0,.28);
  font-family: 'Share Tech Mono',monospace;
  background: radial-gradient(120% 120% at 50% 0%,#06170f,#020604 70%);
  color: var(--green);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(14px,3vw,40px);
}
/* the CRT glass: curvature via radial vignette + scanlines + flicker */

.ret-02__crt {
  position: relative;
  height: calc(100vh - clamp(28px,6vw,80px));
  border-radius: 26px;
  padding: clamp(16px,3vw,38px);
  background: linear-gradient(180deg,rgba(39,255,156,.04),transparent),var(--bg);
  box-shadow: inset 0 0 120px rgba(39,255,156,.12),inset 0 0 30px rgba(0,0,0,.9),0 0 0 3px #0b1f16,0 0 0 9px #050d09,0 30px 80px rgba(0,0,0,.8);
  overflow: hidden;
}

.ret-02__crt::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  background: repeating-linear-gradient(0deg,transparent 0 2px,var(--scan) 2px 4px);
  mix-blend-mode: multiply;
  animation: ret-02-roll 8s linear infinite;
}

@keyframes ret-02-roll {
  to {
    background-position: 0 200px;
  }
}

.ret-02__crt::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  border-radius: 26px;
  background: radial-gradient(120% 120% at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%);
  box-shadow: inset 0 0 90px rgba(0,0,0,.7);
}

.ret-02__glow {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  animation: ret-02-flick 5s infinite;
  mix-blend-mode: screen;
  background: linear-gradient(180deg,rgba(39,255,156,.03),transparent);
}

@keyframes ret-02-flick {
  0%,
    96%,
    100% {
    opacity: 1;
  }

  97% {
    opacity: .78;
  }

  98% {
    opacity: .92;
  }
}

.ret-02__scr {
  position: relative;
  z-index: 6;
  height: 100%;
  overflow-y: auto;
  font-size: clamp(13px,1.6vw,16px);
  line-height: 1.7;
  text-shadow: 0 0 6px rgba(39,255,156,.6);
}

.ret-02__scr::-webkit-scrollbar {
  width: 8px;
}

.ret-02__scr::-webkit-scrollbar-thumb {
  background: var(--dim);
}

.ret-02__head {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px dashed var(--dim);
  padding-bottom: 10px;
  margin-bottom: 14px;
  color: var(--dim);
}

.ret-02__head b {
  font-family: 'Orbitron';
  color: var(--green);
  letter-spacing: .2em;
  font-weight: 900;
  font-size: 1.1em;
}

.ret-02__l {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  opacity: 0;
  transform: translateY(2px);
  animation: ret-02-type .01s forwards;
}

.ret-02__l:nth-child(1) {
  animation-delay: .1s;
}

.ret-02__l:nth-child(2) {
  animation-delay: .35s;
}

.ret-02__l:nth-child(3) {
  animation-delay: .6s;
}

.ret-02__l:nth-child(4) {
  animation-delay: .85s;
}

.ret-02__l:nth-child(5) {
  animation-delay: 1.15s;
}

.ret-02__l:nth-child(6) {
  animation-delay: 1.5s;
}

.ret-02__l:nth-child(7) {
  animation-delay: 1.8s;
}

.ret-02__l:nth-child(8) {
  animation-delay: 2.1s;
}

.ret-02__l:nth-child(9) {
  animation-delay: 2.45s;
}

.ret-02__l:nth-child(10) {
  animation-delay: 2.8s;
}

.ret-02__l:nth-child(11) {
  animation-delay: 3.1s;
}

@keyframes ret-02-type {
  to {
    opacity: 1;
    transform: none;
  }
}

.ret-02 .amb {
  color: var(--amber);
  text-shadow: 0 0 6px rgba(255,176,0,.6);
}

.ret-02 .cy {
  color: var(--cyan);
  text-shadow: 0 0 6px rgba(33,230,255,.6);
}

.ret-02 .dim {
  color: var(--dim);
  text-shadow: none;
}

.ret-02__ok {
  color: #02110a;
  background: var(--green);
  padding: 0 6px;
}

.ret-02__bar {
  display: inline-block;
  color: var(--green);
}

.ret-02__ascii {
  color: var(--dim);
  font-size: clamp(8px,1.2vw,12px);
  line-height: 1.15;
  white-space: pre;
  margin: 6px 0 10px;
}

.ret-02__prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  border-top: 1px dashed var(--dim);
  padding-top: 12px;
}

.ret-02__prompt b {
  color: var(--amber);
}

.ret-02__cursor {
  width: 10px;
  height: 1.1em;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: ret-02-blink 1s steps(2) infinite;
}

@keyframes ret-02-blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ret-02__crt::before,
    .ret-02__glow,
    .ret-02__cursor,
    .ret-02__l {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
```

Techniques used in this demo

mix-blend-modeMDN ↗radial-gradient()MDN ↗@keyframesMDN ↗clamp()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →