12 CSS Retro UI Designs 10 / 12

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.

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

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}}

More from 12 CSS Retro UI Designs

Retro Clothing Store Web UI DesignASCII Art Web Interface CodeRetro Desktop Portfolio Website TemplateRetro Windows 95 UI (CSS Template)Retro Futuristic Terminal UI Code8 Bit Pixel Art UI Elements & ButtonsNeo Brutalist UI Components ExamplesRetro Cassette Player UI Web ComponentVaporwave Aesthetic Website Theme DesignRetro Arcade Game UI Kit90s Website Guestbook Widget
View the full collection →

Search CodeFronts

Loading…

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