Seven retro interface pieces: a 1990s desktop window with bevelled buttons, an 8-bit pixel button, a green-screen terminal login, a synthwave sunset card, an early desktop dialog with a striped title bar, a packaging-style sticker and a segmented progress bar.
A 1990s desktop window with a gradient title bar, bevelled borders and chunky buttons. The bevels are pairs of light and dark borders (light on top and left, dark on bottom and right), which is the whole trick behind the look.
View code
<section class="rt1" aria-labelledby="rt1h"><header><h3 id="rt1h">Save changes?</h3><button aria-label="Close">×</button></header><p>Do you want to save changes to Untitled.txt before closing?</p><div class="btns"><button>Save</button><button>Don’t save</button><button>Cancel</button></div></section>
An 8-bit game button with stepped pixel corners and a hard drop shadow, drawn with box-shadows rather than images. Pressing moves the button into its shadow, and image-rendering is not needed because nothing is scaled.
A login form styled like a monochrome green terminal, with scanlines over the panel and a glowing caret colour. The fields are real labelled inputs, so the retro look costs nothing in usability.
An 80s-inspired card with a striped sunset, a magenta to orange gradient and chrome-style heading. The sun's stripes are a repeating gradient mask, and the heading gradient is clipped to the text with a solid fallback.
View code
<article class="rt4"><div class="sun" aria-hidden="true"></div><h3>NIGHT DRIVE</h3><p>Volume 2 · Out now</p></article>
An early desktop-publishing style dialog: black and white, a title bar with horizontal pinstripes and a square close box, and a thick default button outline. Everything is borders and repeating gradients in pure black and white.
A rotated round sticker with a double ring and bold condensed type, the kind of badge on old product packaging. The rings are stacked inset box-shadows, so the sticker is a single element plus its text, and it is one image to assistive technology.
View code
<div class="rt6" role="img" aria-label="Sticker: Since 1984, hand made"><span>SINCE<br><b>1984</b><br>HAND MADE</span></div>
A progress bar made of separate blocks that fill one at a time, like old installers and game loading screens. It is a native progress element underneath for assistive technology, with the blocks drawn by a repeating gradient sized to the value.
The classic desktop look is light borders on the top and left and dark ones on the bottom and right. Swap them on :active and the button looks pressed in.
Pixels from box-shadows
Hard, unblurred box-shadows stacked around an element draw stepped pixel corners and drop shadows without any images, and they scale cleanly.
Keep modern usability
Retro is a look, not a licence to break things. Keep real labels, visible focus outlines and readable contrast; the green-screen form still uses labelled inputs.
Fonts with fallbacks
Period fonts such as Chicago or MS Sans Serif are rarely installed, so give each stack a good modern fallback, or load an open-licensed lookalike.
Frequently asked questions
Are the system fonts in the demos available?
Usually not; the fallbacks in each font stack are used instead.
Can retro UI be accessible?
Yes. The demos keep native controls, labels and focus states under the vintage styling.