12 CSS Retro UI Designs10 / 12

Pure CSSMIT licensed

Y2K Style Web UI Kit

A glossy Y2K / Aqua interface — candy jelly buttons with specular top-gloss and a 3D push, a pinstripe-animated progress pill, a frosted aqua titlebar with gel orbs, and a glassy toggle switch. Michroma + Rajdhani on an icy aqua-to-lilac gradient with chrome-clip headline type, pure CSS gloss.

Published

Live Demo
Try it

The code

<div class="ret-10">
  <div class="ret-10__shell">
    <div class="ret-10__chrome">
      <div class="ret-10__tb">
        <b>◈ AquaOS · System Preferences</b>
        <span class="ret-10__orbs"><i class="ret-10__orb"></i><i class="ret-10__orb ret-10__orb--c"></i><i class="ret-10__orb ret-10__orb--x"></i></span>
      </div>
      <div class="ret-10__win">
        <div class="ret-10__hero">
          <span class="ret-10__chip">Y2K · FUTURE READY · 2001</span>
          <h1>Glossy. Glassy.<br>Gloriously Y2K.</h1>
          <p>Candy-coated jelly buttons, aqua gradients and pinstripe progress — pure CSS gloss.</p>
        </div>

        <div class="ret-10__btns">
          <button class="ret-10__jelly">Download</button>
          <button class="ret-10__jelly ret-10__jelly--g">Install ✓</button>
          <button class="ret-10__jelly ret-10__jelly--p">Customize</button>
        </div>

        <div class="ret-10__panel">
          <div class="ret-10__glass">
            <small>SYNCING…</small>
            <div class="ret-10__load"><i></i></div>
            <div class="ret-10__pct">68% — 2.4 MB/s</div>
          </div>
          <div class="ret-10__glass" style="display:flex;align-items:center">
            <input type="checkbox" id="ret-10-sw" class="ret-10__sw" checked>
            <label class="ret-10__toggle" for="ret-10-sw">
              <span class="ret-10__rail"></span>
              <b>Aqua FX</b>
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Rajdhani:wght@400;500;600;700&display=swap');

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

.ret-10 ::selection {
  background: #00e5ff;
  color: #001018;
}

.ret-10 {
  --bg1: #aee9ff;
  --bg2: #d6c2ff;
  --aqua: #00b4ff;
  --aqua-d: #0066cc;
  --silver: #dfe8f0;
  --ink: #0a2540;
  --lime: #9dff3c;
  font-family: 'Rajdhani',sans-serif;
  background: radial-gradient(circle at 20% 15%,#ffffff,transparent 40%), linear-gradient(135deg,var(--bg1),var(--bg2) 60%,#ffd1f5);
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(16px,4vw,46px);
  color: var(--ink);
}

.ret-10__shell {
  width: min(700px,100%);
  background: linear-gradient(180deg,rgba(255,255,255,.85),rgba(220,235,250,.7));
  backdrop-filter: blur(6px);
  border-radius: 26px;
  padding: 8px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.9) inset,0 0 0 2px rgba(0,120,200,.25),0 30px 60px rgba(0,80,160,.35);
}

.ret-10__chrome {
  background: linear-gradient(180deg,#fff,#cfe2f2);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 #fff;
}
/* glossy titlebar */

.ret-10__tb {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  position: relative;
  background: linear-gradient(180deg,#6fc8ff 0%,#1f8fe0 48%,#0a6cc0 52%,#1f8fe0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 4px rgba(0,0,0,.2);
}

.ret-10__tb::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  background: linear-gradient(180deg,rgba(255,255,255,.55),transparent);
  pointer-events: none;
}

.ret-10__tb b {
  font-family: 'Michroma';
  color: #fff;
  font-size: .92rem;
  letter-spacing: .05em;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  position: relative;
  z-index: 2;
}

.ret-10__orbs {
  margin-left: auto;
  display: flex;
  gap: 7px;
  position: relative;
  z-index: 2;
}

.ret-10__orb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,#fff,#cdd 60%,#889);
  box-shadow: 0 1px 2px rgba(0,0,0,.4),inset 0 -2px 3px rgba(0,0,0,.3);
}

.ret-10__orb--c {
  background: radial-gradient(circle at 35% 30%,#d6ffb0,var(--lime) 60%,#5a9e00);
}

.ret-10__orb--x {
  background: radial-gradient(circle at 35% 30%,#ffd0d0,#ff5555 60%,#aa0000);
}

.ret-10__win {
  padding: 24px;
  display: grid;
  gap: 20px;
}

.ret-10__hero {
  text-align: center;
}

.ret-10__chip {
  display: inline-block;
  font-family: 'Michroma';
  font-size: .62rem;
  letter-spacing: .25em;
  color: var(--aqua-d);
  background: linear-gradient(180deg,#fff,#d6ecff);
  padding: 6px 14px;
  border-radius: 20px;
  box-shadow: inset 0 1px 0 #fff,0 1px 3px rgba(0,80,160,.3);
  margin-bottom: 14px;
}

.ret-10__hero h1 {
  font-family: 'Michroma';
  font-size: clamp(1.6rem,6vw,2.8rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  background: linear-gradient(180deg,#0a6cc0,#00b4ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 1px rgba(255,255,255,.8));
}

.ret-10__hero p {
  font-size: 1.05rem;
  font-weight: 500;
  margin-top: 10px;
  color: #2a5575;
}
/* the glossy jelly buttons */

.ret-10__btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.ret-10__jelly {
  position: relative;
  border: none;
  cursor: pointer;
  font-family: 'Rajdhani';
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  padding: 15px 34px;
  border-radius: 30px;
  overflow: hidden;
  background: linear-gradient(180deg,#3fc0ff,#0a78d0 52%,#0a6cc0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7),0 4px 0 #04508f,0 8px 16px rgba(0,80,160,.4);
  transition: transform .08s,box-shadow .08s;
}

.ret-10__jelly::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 8%;
  right: 8%;
  height: 42%;
  border-radius: 30px;
  background: linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));
  pointer-events: none;
}

.ret-10__jelly:hover {
  filter: brightness(1.06);
}

.ret-10__jelly:active {
  transform: translateY(4px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7),0 0 0 #04508f,0 4px 8px rgba(0,80,160,.4);
}

.ret-10__jelly--g {
  background: linear-gradient(180deg,#c8ff7a,#7ec000 52%,#5a9e00);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7),0 4px 0 #437400,0 8px 16px rgba(80,140,0,.4);
  color: #1a3000;
  text-shadow: 0 1px 1px rgba(255,255,255,.4);
}

.ret-10__jelly--g:active {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7),0 0 0 #437400,0 4px 8px rgba(80,140,0,.4);
}

.ret-10__jelly--p {
  background: linear-gradient(180deg,#ff9be8,#d63caa 52%,#b01f8f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7),0 4px 0 #8a1570,0 8px 16px rgba(160,0,120,.4);
}
/* progress pill + toggle */

.ret-10__panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 520px) {
  .ret-10__panel {
    grid-template-columns: 1fr;
  }

  .ret-10__hero h1 {
    font-size: 1.5rem;
  }
}

.ret-10__glass {
  background: linear-gradient(180deg,rgba(255,255,255,.9),rgba(210,232,250,.6));
  border-radius: 16px;
  padding: 16px;
  box-shadow: inset 0 1px 0 #fff,0 2px 6px rgba(0,80,160,.18);
}

.ret-10__glass small {
  font-family: 'Michroma';
  font-size: .6rem;
  letter-spacing: .18em;
  color: var(--aqua-d);
  display: block;
  margin-bottom: 10px;
}

.ret-10__load {
  height: 18px;
  border-radius: 12px;
  background: linear-gradient(180deg,#c2d8ea,#e8f2fb);
  box-shadow: inset 0 2px 3px rgba(0,60,120,.3);
  overflow: hidden;
  padding: 2px;
}

.ret-10__load i {
  display: block;
  height: 100%;
  width: 68%;
  border-radius: 10px;
  background: linear-gradient(180deg,#7fe0ff,#00b4ff 50%,#0078c8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  position: relative;
  overflow: hidden;
}

.ret-10__load i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg,rgba(255,255,255,.3) 0 8px,transparent 8px 16px);
  animation: ret-10-stripe 1s linear infinite;
}

@keyframes ret-10-stripe {
  to {
    background-position: 16px 0;
  }
}

.ret-10__pct {
  font-weight: 700;
  color: var(--aqua-d);
  margin-top: 8px;
  font-size: .9rem;
}
/* aqua toggle - checkbox hack */

.ret-10__sw {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ret-10__toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.ret-10__rail {
  width: 64px;
  height: 30px;
  border-radius: 20px;
  background: linear-gradient(180deg,#c2d8ea,#e8f2fb);
  box-shadow: inset 0 2px 4px rgba(0,60,120,.35);
  position: relative;
  transition: background .2s;
}

.ret-10__rail::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,#fff,#cdd 70%);
  box-shadow: 0 2px 3px rgba(0,0,0,.3);
  transition: transform .2s;
}

.ret-10__sw:checked ~ .ret-10__toggle .ret-10__rail {
  background: linear-gradient(180deg,#7fe0ff,#00b4ff);
}

.ret-10__sw:checked ~ .ret-10__toggle .ret-10__rail::before {
  transform: translateX(34px);
  background: radial-gradient(circle at 35% 30%,#fff,#aef);
}

.ret-10__toggle b {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .ret-10__load i::after {
    animation: none;
  }
}
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: Y2K Style Web UI Kit
Source: https://codefronts.com/design-styles/css-retro-designs/y2k-style-web-ui-kit/

A glossy Y2K / Aqua interface — candy jelly buttons with specular top-gloss and a 3D push, a pinstripe-animated progress pill, a frosted aqua titlebar with gel orbs, and a glassy toggle switch. Michroma + Rajdhani on an icy aqua-to-lilac gradient with chrome-clip headline type, pure CSS gloss.
## HTML
```html
<div class="ret-10">
  <div class="ret-10__shell">
    <div class="ret-10__chrome">
      <div class="ret-10__tb">
        <b>◈ AquaOS · System Preferences</b>
        <span class="ret-10__orbs"><i class="ret-10__orb"></i><i class="ret-10__orb ret-10__orb--c"></i><i class="ret-10__orb ret-10__orb--x"></i></span>
      </div>
      <div class="ret-10__win">
        <div class="ret-10__hero">
          <span class="ret-10__chip">Y2K · FUTURE READY · 2001</span>
          <h1>Glossy. Glassy.<br>Gloriously Y2K.</h1>
          <p>Candy-coated jelly buttons, aqua gradients and pinstripe progress — pure CSS gloss.</p>
        </div>

        <div class="ret-10__btns">
          <button class="ret-10__jelly">Download</button>
          <button class="ret-10__jelly ret-10__jelly--g">Install ✓</button>
          <button class="ret-10__jelly ret-10__jelly--p">Customize</button>
        </div>

        <div class="ret-10__panel">
          <div class="ret-10__glass">
            <small>SYNCING…</small>
            <div class="ret-10__load"><i></i></div>
            <div class="ret-10__pct">68% — 2.4 MB/s</div>
          </div>
          <div class="ret-10__glass" style="display:flex;align-items:center">
            <input type="checkbox" id="ret-10-sw" class="ret-10__sw" checked>
            <label class="ret-10__toggle" for="ret-10-sw">
              <span class="ret-10__rail"></span>
              <b>Aqua FX</b>
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```
## CSS
```css
@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Rajdhani:wght@400;500;600;700&display=swap');

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

.ret-10 ::selection {
  background: #00e5ff;
  color: #001018;
}

.ret-10 {
  --bg1: #aee9ff;
  --bg2: #d6c2ff;
  --aqua: #00b4ff;
  --aqua-d: #0066cc;
  --silver: #dfe8f0;
  --ink: #0a2540;
  --lime: #9dff3c;
  font-family: 'Rajdhani',sans-serif;
  background: radial-gradient(circle at 20% 15%,#ffffff,transparent 40%), linear-gradient(135deg,var(--bg1),var(--bg2) 60%,#ffd1f5);
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(16px,4vw,46px);
  color: var(--ink);
}

.ret-10__shell {
  width: min(700px,100%);
  background: linear-gradient(180deg,rgba(255,255,255,.85),rgba(220,235,250,.7));
  backdrop-filter: blur(6px);
  border-radius: 26px;
  padding: 8px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.9) inset,0 0 0 2px rgba(0,120,200,.25),0 30px 60px rgba(0,80,160,.35);
}

.ret-10__chrome {
  background: linear-gradient(180deg,#fff,#cfe2f2);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 #fff;
}
/* glossy titlebar */

.ret-10__tb {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  position: relative;
  background: linear-gradient(180deg,#6fc8ff 0%,#1f8fe0 48%,#0a6cc0 52%,#1f8fe0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 4px rgba(0,0,0,.2);
}

.ret-10__tb::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  background: linear-gradient(180deg,rgba(255,255,255,.55),transparent);
  pointer-events: none;
}

.ret-10__tb b {
  font-family: 'Michroma';
  color: #fff;
  font-size: .92rem;
  letter-spacing: .05em;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  position: relative;
  z-index: 2;
}

.ret-10__orbs {
  margin-left: auto;
  display: flex;
  gap: 7px;
  position: relative;
  z-index: 2;
}

.ret-10__orb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,#fff,#cdd 60%,#889);
  box-shadow: 0 1px 2px rgba(0,0,0,.4),inset 0 -2px 3px rgba(0,0,0,.3);
}

.ret-10__orb--c {
  background: radial-gradient(circle at 35% 30%,#d6ffb0,var(--lime) 60%,#5a9e00);
}

.ret-10__orb--x {
  background: radial-gradient(circle at 35% 30%,#ffd0d0,#ff5555 60%,#aa0000);
}

.ret-10__win {
  padding: 24px;
  display: grid;
  gap: 20px;
}

.ret-10__hero {
  text-align: center;
}

.ret-10__chip {
  display: inline-block;
  font-family: 'Michroma';
  font-size: .62rem;
  letter-spacing: .25em;
  color: var(--aqua-d);
  background: linear-gradient(180deg,#fff,#d6ecff);
  padding: 6px 14px;
  border-radius: 20px;
  box-shadow: inset 0 1px 0 #fff,0 1px 3px rgba(0,80,160,.3);
  margin-bottom: 14px;
}

.ret-10__hero h1 {
  font-family: 'Michroma';
  font-size: clamp(1.6rem,6vw,2.8rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  background: linear-gradient(180deg,#0a6cc0,#00b4ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 1px rgba(255,255,255,.8));
}

.ret-10__hero p {
  font-size: 1.05rem;
  font-weight: 500;
  margin-top: 10px;
  color: #2a5575;
}
/* the glossy jelly buttons */

.ret-10__btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.ret-10__jelly {
  position: relative;
  border: none;
  cursor: pointer;
  font-family: 'Rajdhani';
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  padding: 15px 34px;
  border-radius: 30px;
  overflow: hidden;
  background: linear-gradient(180deg,#3fc0ff,#0a78d0 52%,#0a6cc0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7),0 4px 0 #04508f,0 8px 16px rgba(0,80,160,.4);
  transition: transform .08s,box-shadow .08s;
}

.ret-10__jelly::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 8%;
  right: 8%;
  height: 42%;
  border-radius: 30px;
  background: linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));
  pointer-events: none;
}

.ret-10__jelly:hover {
  filter: brightness(1.06);
}

.ret-10__jelly:active {
  transform: translateY(4px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7),0 0 0 #04508f,0 4px 8px rgba(0,80,160,.4);
}

.ret-10__jelly--g {
  background: linear-gradient(180deg,#c8ff7a,#7ec000 52%,#5a9e00);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7),0 4px 0 #437400,0 8px 16px rgba(80,140,0,.4);
  color: #1a3000;
  text-shadow: 0 1px 1px rgba(255,255,255,.4);
}

.ret-10__jelly--g:active {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7),0 0 0 #437400,0 4px 8px rgba(80,140,0,.4);
}

.ret-10__jelly--p {
  background: linear-gradient(180deg,#ff9be8,#d63caa 52%,#b01f8f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7),0 4px 0 #8a1570,0 8px 16px rgba(160,0,120,.4);
}
/* progress pill + toggle */

.ret-10__panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 520px) {
  .ret-10__panel {
    grid-template-columns: 1fr;
  }

  .ret-10__hero h1 {
    font-size: 1.5rem;
  }
}

.ret-10__glass {
  background: linear-gradient(180deg,rgba(255,255,255,.9),rgba(210,232,250,.6));
  border-radius: 16px;
  padding: 16px;
  box-shadow: inset 0 1px 0 #fff,0 2px 6px rgba(0,80,160,.18);
}

.ret-10__glass small {
  font-family: 'Michroma';
  font-size: .6rem;
  letter-spacing: .18em;
  color: var(--aqua-d);
  display: block;
  margin-bottom: 10px;
}

.ret-10__load {
  height: 18px;
  border-radius: 12px;
  background: linear-gradient(180deg,#c2d8ea,#e8f2fb);
  box-shadow: inset 0 2px 3px rgba(0,60,120,.3);
  overflow: hidden;
  padding: 2px;
}

.ret-10__load i {
  display: block;
  height: 100%;
  width: 68%;
  border-radius: 10px;
  background: linear-gradient(180deg,#7fe0ff,#00b4ff 50%,#0078c8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  position: relative;
  overflow: hidden;
}

.ret-10__load i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg,rgba(255,255,255,.3) 0 8px,transparent 8px 16px);
  animation: ret-10-stripe 1s linear infinite;
}

@keyframes ret-10-stripe {
  to {
    background-position: 16px 0;
  }
}

.ret-10__pct {
  font-weight: 700;
  color: var(--aqua-d);
  margin-top: 8px;
  font-size: .9rem;
}
/* aqua toggle - checkbox hack */

.ret-10__sw {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ret-10__toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.ret-10__rail {
  width: 64px;
  height: 30px;
  border-radius: 20px;
  background: linear-gradient(180deg,#c2d8ea,#e8f2fb);
  box-shadow: inset 0 2px 4px rgba(0,60,120,.35);
  position: relative;
  transition: background .2s;
}

.ret-10__rail::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,#fff,#cdd 70%);
  box-shadow: 0 2px 3px rgba(0,0,0,.3);
  transition: transform .2s;
}

.ret-10__sw:checked ~ .ret-10__toggle .ret-10__rail {
  background: linear-gradient(180deg,#7fe0ff,#00b4ff);
}

.ret-10__sw:checked ~ .ret-10__toggle .ret-10__rail::before {
  transform: translateX(34px);
  background: radial-gradient(circle at 35% 30%,#fff,#aef);
}

.ret-10__toggle b {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .ret-10__load i::after {
    animation: none;
  }
}
```

Techniques used in this demo

background-clip: textMDN ↗filterMDN ↗backdrop-filterMDN ↗radial-gradient()MDN ↗grid-templateMDN ↗@keyframesMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →