Design Atlas
한국어
❖ Design styles

Y2K style

Y2K 스타일

Chrome metallic text, holographic gradients, scattered sparkles — the early-2000s internet look, revived in the 2020s.

Also known as: Frutiger metallicCyber Y2KMillennium bug aesthetic
···
html
<div class="stage">
  <span class="star s1">✦</span><span class="star s2">✧</span><span class="star s3">✦</span>
  <h1 id="chrome">Y2K</h1>
  <div class="pill">babygirl</div>
</div>
css
body{background:linear-gradient(150deg,#dff1ff,#ffe1f2 55%,#e9e2ff)}
.stage{position:relative;display:grid;place-items:center;width:min(92%,320px);padding:20px}
h1{margin:0;font-family:"Arial Black","Helvetica Neue",sans-serif;font-weight:900;
  font-size:clamp(38px,10vmin,60px);letter-spacing:-.02em;-webkit-text-stroke:1px rgba(50,30,70,.35);
  background:linear-gradient(100deg,#3c4a58 0%,#fff 16%,#1e2732 32%,#fff 50%,#5c3a55 66%,#fff 82%,#3c4a58 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 8px rgba(60,30,70,.35));animation:shift 3.5s linear infinite}
@keyframes shift{to{background-position:220% 0}}
.pill{margin-top:10px;padding:5px 16px;border-radius:999px;font-size:11px;font-weight:800;color:#7a2e63;
  background:linear-gradient(120deg,#ffd6f0,#d6e9ff,#e4ffd9);letter-spacing:.04em;box-shadow:0 2px 8px rgba(120,60,110,.25)}
.star{position:absolute;font-size:20px;color:#fff;text-shadow:0 0 3px #a34ea8,0 0 10px rgba(163,78,168,.8);animation:tw 1.6s ease-in-out infinite}
.s1{top:6%;left:14%;animation-delay:0s}
.s2{top:70%;right:12%;animation-delay:.4s}
.s3{top:14%;right:20%;animation-delay:.8s}
@keyframes tw{0%,100%{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1.2)}}

Its source is the optimistic "future" imagined around 1999–2003, when millennium excitement mixed with anxiety — Windows XP's blue sky, early iPod ads, MSN Messenger emoticons all carry that mood. It resurfaced in web design in the 2020s alongside a broader Y2K fashion revival.

Visually: chrome-reflective silver gradient text, puffy bubble-lettered 3D type, iridescent holographic gradients that shift hue with angle, and scattered sparkle/heart stickers. You don't need real 3D rendering — layering several colors with linear-gradient and clipping it to text with background-clip: text fakes the chrome look convincingly.

It's used to evoke nostalgia on Gen-Z-facing fashion, beauty and music-artist pages. It works best scoped to a mood-setting hero section rather than screens where information clarity is the priority.