20 CSS Retro UI

It is four separate effects composed, not one. Scanlines are a repeating-linear-gradient overlay with alternating transparent and dark bands. Curvature comes from a generous border-radius plus a radial vignette that darkens the corners, which reads as barrel distortion without any actual warping. Phosphor bloom is a duplicated text layer blurred behind the sharp one, so bright glyphs appear to spill light. Flicker is a slow, low-amplitude opacity animation. Keeping them separate is what makes the effect tunable — you can dial the scanlines back for legibility while keeping the bloom, which is exactly what you want on a screen people actually have to read.

Because the browser smooths by default. Every image is resampled with bilinear filtering when scaled, which is right for photographs and wrong for a 16x16 sprite. Setting image-rendering to pixelated turns that off and gives you nearest-neighbour scaling, so each source pixel becomes a hard square block. Two traps follow. Non-integer scale factors reintroduce softness even with the property set, because a source pixel no longer maps to a whole number of screen pixels — scale by 2x, 3x or 4x, never 2.5x. And the property only affects sampled images; a shape you drew with border-radius or box-shadow is already vector and is unaffected.

Four box-shadow insets in a fixed order, not a border property. The outer pair does the main lighting — white on the top and left, dark grey on the bottom and right — and the inner pair adds the second tone that gives the edge its depth. Reverse the order and the control reads as pressed rather than raised, which is the whole mechanism behind the era's click feedback. It matters that this is box-shadow rather than border-style outset: outset renders inconsistently across engines and cannot express the two-tone inner edge that makes the bevel look like the real thing.

No. Every effect here is built from first principles — gradients, box-shadow, transforms, grid — with nothing loaded from outside the demo. That is deliberate. A retro CSS framework gives you a set of finished components and no understanding of how they work, so the moment you need something the library does not ship, you are stuck. Learning that a bevel is four shadows in a fixed order or that a character-cell interface is a grid measured in ch units means you can build the piece nobody wrote for you.

By treating period accuracy and accessibility as separate problems and solving both. Several eras conflict with modern requirements directly. A one-bit Macintosh interface has no second colour for state, so state is carried by pattern and position instead. A monochrome phosphor monitor has one hue, so the same applies. Blinking cursors and arcade prompts are exactly what SC 2.2.2 is about, so everything blinking here stops under prefers-reduced-motion and nothing flashes more than three times a second. Period close boxes were tiny, so the chrome is scaled up to keep targets at 44px. Draggable windows are operable with arrow keys, because pointer-only dragging fails keyboard access outright. The look survives all of it.

MS-DOS text mode and Teletext were not laid out in pixels — the screen was a fixed grid of character cells, 80 by 25 for DOS and 40 by 25 for Teletext, and nothing could sit between two cells. Reproducing that in CSS means a grid whose column width is exactly one monospace character, which is what the ch unit gives you. Every alignment is then integer by construction, box-drawing characters join up cleanly, and the layout cannot drift the way a pixel-measured one does. The constraint is also the reason those interfaces look the way they do, so honouring it matters more than approximating the colours.

More often than it is the right one. These are strong commitments that carry connotations a product may not want: a CRT terminal reads as hacker-adjacent, Y2K gloss reads as unserious, a Windows 95 desktop reads as ironic. For most working software that is a cost rather than a feature, and it competes with the interface's actual job. Retro earns its place where the reference is the point — a game, a music or hardware product, a portfolio, a launch campaign, a deliberately nostalgic brand — and works badly anywhere the user simply needs to get something done.