12 CSS Retro UI Designs

98.css and XP.css are popular CSS frameworks that recreate Win98/XP — but they're external dependencies (an extra ~30 KB), they hard-code their own class names you have to adopt, and customising them means fighting their cascade. Demo #01 ships the same Win95 fidelity built from scratch in pure CSS so you can copy the bits you need and skip the framework. The core mechanics: raised/inset bevels via split border-color (top + left = white/grey light, right + bottom = dark grey/black, no gradients needed — same trick the original Windows GDI used), the iconic Start orb built with a conic-gradient for the four-color flag, a checkbox-hack Start menu (hidden <input type="checkbox"> + :checked sibling selectors so the menu opens with zero JS), dotted focus rings using outline: 1px dotted, and a working taskbar tray clock via CSS only. Fonts: Pixelify Sans + VT323 for the authentic look. Most "retro UI" tutorials online either point you at the 98.css framework or skip the raised/inset bevel mechanic entirely — both are competitor gaps fixed here.

Demo #02 ships the canonical recipe: three layered effects on a single dark surface. (1) Horizontal scanlines via a repeating linear-gradient at 2px intervals: background: repeating-linear-gradient(to bottom, transparent 0 1px, rgba(0,255,0,0.04) 1px 2px) overlaid via a ::before pseudo-element. (2) Phosphor glow on text via text-shadow: 0 0 4px currentColor, 0 0 12px currentColor — the green-on-black halo. (3) Subtle curvature via border-radius + an inner box-shadow that simulates the slight pillow distortion CRT tubes had at the corners. Add a boot-reveal animation (@keyframes typing each line then a cursor blink) and the effect is complete. Most "CRT effect" tutorials reach for WebGL or canvas filters; the pure-CSS version uses zero JavaScript and runs entirely on the compositor. Browser support: every evergreen browser since 2018.

Demo #03 uses the multi-layered box-shadow trick — a single empty <div> (no markup overhead) becomes a multi-color pixel sprite by listing dozens of 1px-spaced box-shadow entries. Each shadow declaration places one "pixel" at an exact offset: box-shadow: 1px 0 0 #ff0, 2px 0 0 #ff0, 1px 1px 0 #f00, .... The result is a real pixel-art icon rendered in pure CSS at any size that respects image-rendering: pixelated. The same technique drives 8-bit button bevels (top edge = bright color, right + bottom = darker shade — the classic NES "3D" look). Demo #03 ships a complete HUD with health bar (chunky pixel segments), inventory grid, dialog box, and four button variants. Compared to using SVG pixel art, the CSS approach is purely declarative — no separate asset files to manage, infinitely scalable, and the colors are CSS variables you can theme.

Neo-brutalism is the deliberate-ugly aesthetic that swept design Twitter in 2021-2023 and remains a strong differentiator for indie SaaS / dev tools (Gumroad, Linear's marketing site, Vercel ship demos). The recipe is intentionally hostile to traditional polish: thick black borders (border: 4px solid #000), hard offset shadows with zero blur (box-shadow: 8px 8px 0 #000) that snap to a flat plane instead of softly fading, zero border-radius (sharp corners only), saturated primary colors on big flat fills (hot pink, electric yellow, lime green, cobalt), oversized condensed sans-serif typography (Archivo Black, Space Grotesk Bold), and visible button press — on :active the box-shadow collapses to 0 and the element translates 3px 3px to fake the depression. Demo #04 ships a complete component toggle board with checkboxes, buttons, cards, badges, and pills all in this aesthetic. Browser support: anything. The hardest part is the design discipline of NOT softening the edges.

Demo #06 is the canonical vaporwave aesthetic with the three signature elements all rendered in CSS (no images). (1) Sun gradient: an absolutely-positioned circle with background: linear-gradient(180deg, #ff71ce, #ff8b3d, #ffea00) and a mask-image: linear-gradient(to top, transparent 0%, black 50%) so the sun fades into the horizon. (2) Perspective grid floor: a 2D grid via background-image: linear-gradient(to right, #ff00ff 1px, transparent 1px), linear-gradient(to bottom, #ff00ff 1px, transparent 1px) tilted with transform: perspective(400px) rotateX(60deg) for the iconic Tron-style receding floor. (3) Statue silhouettes / palm trees via clip-path: polygon(...) on solid fills — pure SVG-shaped CSS, no image assets. Pair with Bebas Neue or Monoton typography, the #ff71ce hot-pink + #00f0ff cyan palette, and an animated filter: hue-rotate for the optional color shift. Most vaporwave "how to" articles online show the palette and call it done — they skip the perspective grid + masked sun + clip-path silhouettes that actually make the aesthetic recognizable.

Demo #08 ships an interactive ASCII shell — a real command interpreter that parses commands (ls, cd, cat, help, clear, whoami, etc.) from a virtual filesystem and renders output in monospace text within an ASCII-bordered panel. The CSS handles the entire visual chrome — the ASCII border (built with Unicode box-drawing characters ┌ ─ ┐ │ └ ┘), the green-on-black monospace surface, the prompt cursor that blinks via @keyframes, the scrollable output history. JavaScript handles only the command parsing + virtual filesystem (~80 lines, no dependencies). Compared to a real terminal emulator (xterm.js: ~250 KB, hyperterm: even bigger), this is a stylistic ASCII shell that's perfect for a portfolio or 404 page or developer tool landing. The competitor gap: every "ASCII art on the web" article shows static ASCII figlet text; this one is actually interactive.

Demo #09 is a faithful 1996-era guestbook page with all six period-correct elements: a tiled background via background-image with a Geocities-style starfield, a hit counter using a CSS-only animated odometer with each digit in a flipping panel, marquee text (using the modern CSS animation equivalent of the deprecated <marquee> tag — no need for the legacy element), an animated GIF placeholder using a stepped CSS animation that cycles through frames, under construction blink via animation: blink 1s step-end infinite, and a webring footer with the iconic prev/random/next links + ring buttons. Typography is Comic Sans MS (this is the one place where it's actually correct). What makes this useful in 2026: nostalgia design is a strong genre for indie SaaS, retro-themed event sites, and developer portfolios. Most "90s website CSS" tutorials online stop at the tiled background; this demo ships the full kit.

Y2K (the late-90s through ~2003 aesthetic) and vaporwave are often confused but they're distinct. Y2K is the actual visual language of that era — chrome / aqua / liquid metal gradients (Apple's Aqua interface, WinXP Luna theme), bubble buttons with glossy highlights, transparent vinyl-style overlays, jellybean shapes, holographic / iridescent foils, and a palette of pearl whites, sky blues, baby pinks. Vaporwave is a 2010s INTERPRETATION of mid-90s nostalgia — different palette (hot pink + cyan), different references (Greco-Roman statues, dolphins, Windows 95 error dialogs as ironic memes), more digital-decay textures. Demo #10 ships the Y2K kit: aqua-gloss buttons with the iconic three-layer gradient (light to mid to dark with a top highlight stripe), bubble-shaped input fields, pearl-effect cards, chrome typography via background-clip text gradients, and a working checkbox-driven theme toggle. The Y2K aesthetic is having a real revival in 2023-2026 fashion + design; demo #10 captures the canonical patterns.

Demo #12 is a fully draggable retro desktop portfolio — multiple windows the visitor can grab by the title bar and drag around the canvas, with z-index focus (clicking a window brings it to the front), a minimize/maximize/close trio per window, and a working taskbar. The visual chrome is 100% CSS — the title bar, window controls (red/yellow/green Mac dots OR Windows-style square X), inset/raised bevels, the desktop wallpaper. The drag + focus mechanics are ~60 lines of vanilla JS using pointerdown / pointermove / pointerup to track the drag delta and update transform: translate on the active window. Falls back gracefully without JS: windows render in CSS Grid as a static portfolio layout. Used by Rauno Freiberg, Henry Heffernan, and Bruno Simon as personal-site signatures — the draggable desktop is a strong portfolio differentiator that most "portfolio template" lists skip entirely.

Yes on both. Every demo has a sensible mobile breakpoint — the Win95 desktop (#01) reflows to a single window on narrow screens, the cassette deck (#05) keeps its proportions but shrinks, the desktop portfolio (#12) collapses to a stacked-window mobile view rather than trying to be draggable on touch. Every interactive surface is a real <button>, <a>, <input>, or <label>-wrapped checkbox — no clickable <div>s — so keyboard navigation and screen readers work. The CRT (#02), 8-bit HUD (#03), and vaporwave (#06) demos all respect @media (prefers-reduced-motion: reduce) and disable continuous animations for visitors with that OS preference. All 12 demos are MIT-licensed for both personal AND commercial projects; copy any demo's HTML + CSS from the code panel and drop it into your project.

Quick decision guide. Indie SaaS landing page: Demo #04 (neo-brutalism) — the aesthetic signals "made by humans, not a template" and stands out in a sea of polished SaaS sites. Developer tool / CLI product: Demo #02 (CRT terminal) or Demo #08 (ASCII shell) for the cyberpunk dev-tool aesthetic; pairs especially well with terminal-first products. Game / Twitch overlay / Discord bot landing: Demo #03 (8-bit pixel) or Demo #07 (arcade cabinet) — both nail the gaming nostalgia. Personal portfolio: Demo #12 (draggable desktop) is the highest-effort, highest-reward — visitors play with your portfolio AS the portfolio. Or Demo #01 (Win95) for a slightly less interactive version of the same idea. Marketing / lifestyle brand: Demo #06 (vaporwave) or Demo #10 (Y2K) for nostalgia-driven branding. 404 page / event site / fun side project: Demo #09 (90s guestbook) for the lo-fi maximalist Web 1.0 feel. Demo #11 (retro storefront) is the most production-ready of the kit — drop-in vintage catalogue aesthetic for fashion, vinyl, or any product that benefits from a curated retail vibe.