Retro 90s vs Retro Y2K
Ten years apart and constantly confused. One is bevels and primary colours; the other is chrome and gloss.
Short answer: The 90s page has no gradients at all — depth comes from four-colour bevels on square boxes, navy and yellow, and links that are underlined by default. Y2K has gradients everywhere, rounded corners, white borders and a chrome finish.
What actually separates them
The 90s preview is a reconstruction of browser defaults: a navy background, yellow Times text, and borders built from outset, inset and ridge styles that produce a four-colour bevel with no gradient involved. The radius is 0 on every element, because rounded corners were not available.
Y2K is the opposite: every surface is a linear gradient running light-dark-light to suggest metal, corners run to 18 to 22px, and a 1px white border traces each panel. Nothing is beveled, because by then the depth cue had moved from the border to the fill.
Decision table
A filled dot marks the side that handles the dimension more convincingly. It is a judgement, not a rule — several rows are genuinely a tie.
| Dimension | Retro - 90s Web | Retro - Y2K Aesthetic |
|---|---|---|
| Depth cue | Four-colour bevel on the border | Light-dark-light gradient fill |
| Corners | 0 everywhere | ● 18 to 22px |
| Border | 3px outset #ffffff, 3px ridge #c0c0c0 | 1px solid #ffffff |
| Palette | Navy #000080, yellow, silver #c0c0c0 | ● Chrome greys, pink, cyan, lilac |
| Typeface | Times New Roman | Wide geometric sans |
| Motion | Blink and marquee, if anything | ● Gloss sweeps and gentle float |
The CSS that changes
These are the declarations that make the difference visible. Everything else — font sizes, spacing, section order — is shared, because both pages use the same markup.
| Property | Retro - 90s Web | Retro - Y2K Aesthetic |
|---|---|---|
| Depth | border: 3px outset #ffffff / ridge #c0c0c0 |
background: linear-gradient(180deg, #2b2e45, #8e97ad) |
| Radius | 0 |
18px to 22px |
| Border | 3px inset or outset, four colours |
1px solid #ffffff |
| Headline fill | color: #ffff66 (flat) |
chrome gradient clipped to the glyphs |
When each one wins
Retro - 90s Web wins when
- The joke is the point — a nostalgia play, an April Fool page, a deliberately dated brand
- You want the page to feel like software from a specific era, not a style applied to modern layout
- The audience is old enough to recognise it and the content is short
Retro - Y2K Aesthetic wins when
- You want retro without the hostility: Y2K is dated but still comfortable to read
- The brand is music, fashion or beauty, where chrome and gloss read as playful rather than broken
- You need the look to survive on a phone, which bevels largely do not
Steering a model to one or the other
The words matter here: ask for outset and inset borders and Times on navy for the 90s; ask for chrome gradients, 20px radii and a 1px white hairline for Y2K. Do not ask for retro in general — a model will give you Y2K for 90s roughly half the time, because that is the more documented reference. Also pin the palette explicitly: the 90s set is four values, and any additional colour immediately reads as the wrong decade.