Liquid chrome
Metallic gradients with a hard horizon line through the middle turn type and icons into reflective metal.
The look of the year 2000. Liquid chrome, glossy bubble buttons and translucent plastic promised a shiny digital future, and Gen Z brought it back two decades later.
Enter the future Copy promptY2K design celebrates technology with gloss and shine. Everything looks like polished plastic or liquid metal, lit by an optimistic future.
Metallic gradients with a hard horizon line through the middle turn type and icons into reflective metal.
Buttons and orbs have a white highlight on top and a darker bottom, like candy or water drops.
Frosted, tinted surfaces recall the see-through gadgets of the late 1990s.
Wide, extended sans-serifs with a space-age feel, often set in capitals.
Y2K is named after the millennium bug panic, but its look came from optimism about computers and the new century.
Apple's translucent iMac G3 makes colored plastic the look of consumer tech.
Music videos, movie titles and sportswear lean on chrome, silver and blue light as symbols of the new millennium.
The year 2000 arrives without the feared computer crash, and the era gets its nickname.
Operating systems and media players adopt shiny blue buttons, bubbles and aqua gel effects.
Fashion, TikTok and music artwork revive chrome type and butterflies, and the web follows.
Y2K motion loves orbits and shine. Things spin, float and sparkle as if powered by a gadget.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Brands aimed at Gen Z use chrome type and bubble buttons for instant nostalgia.
Pop and electronic acts use liquid metal and orbs for album campaigns.
Gadgets and apps use gloss to feel fun and futuristic at once.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Cool icy blues and silver, with bubblegum pink and aqua as highlights. Tap a swatch to copy its hex value.
:root{
--ice-blue: #D9E4FF;
--electric-blue: #3A5BFF;
--bubblegum: #FF7AD9;
--aqua: #7FE7FF;
--chrome: #B8C4E0;
--midnight: #10153A;
}A wide, extended display face for the space-age feel, paired with a technical but readable sans.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Michroma",system-ui,sans-serif;
--font-b: "Exo 2",system-ui,sans-serif;
--font-m: ui-monospace,Menlo,monospace;
--fs-d: clamp(46px, 9vw, 100px);
--fs-1: 45.7px; --fs-2: 35.2px;
--fs-3: 27.0px; --fs-4: 20.8px;
--fs-body: 16px; --fs-sm: 12.3px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 400;
letter-spacing: .02em;
text-transform: none;
line-height: 1.15;
}
/* fonts: Michroma and Exo 2 */Keep the grid simple so gloss and shine can carry the personality. Floating elements may break out of it.
Equal cards, product tiles, feature lists.
<div class="row"><div class="col-4">4</div><div class="col-4">4</div><div class="col-4">4</div></div>Articles, documentation, settings pages.
<div class="row"><div class="col-8">8</div><div class="col-4">4</div></div>Heroes and feature sections with tension.
<div class="row"><div class="col-5">5</div><div class="col-7">7</div></div>Dense galleries and logo walls.
<div class="row"><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div></div>.row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
}
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
@media (max-width: 760px) {
.row { grid-template-columns: 1fr; }
.row > * { grid-column: auto; }
}Rounded and bubbly. Shadows are blue-tinted, and a white inner highlight at the top creates the gloss.
:root {
--radius: 22px;
--radius-sm: 14px;
--bw: 2px;
--shadow: 0 10px 30px rgba(58,91,255,.25), inset 0 2px 0 rgba(255,255,255,.9);
--shadow-sm: 0 4px 12px rgba(58,91,255,.25), inset 0 1px 0 rgba(255,255,255,.9);
--gap: 24px;
--pad: 24px;
}Change three tokens and the whole page responds, because every component reads from them. Reset brings back the style defaults.
Move a control to see the token change.Every component below is plain HTML with class names from the kit. Copy the full kit CSS once, then paste any snippet.
/* Y2K Aesthetic kit · Anti-Boring */
:root{
--bg:#D9E4FF;
--surface:rgba(255,255,255,.75);
--surface2:#C4D4FF;
--fg:#10153A;
--muted:#3D4677;
--accent:#3A5BFF;
--accent-fg:#FFFFFF;
--accent2:#FF7AD9;
--accent2-fg:#10153A;
--border:#8FA2E8;
--bw:2px;
--radius:22px;
--radius-sm:14px;
--shadow:0 10px 30px rgba(58,91,255,.25), inset 0 2px 0 rgba(255,255,255,.9);
--shadow-sm:0 4px 12px rgba(58,91,255,.25), inset 0 1px 0 rgba(255,255,255,.9);
--font-d:"Michroma",system-ui,sans-serif;
--font-b:"Exo 2",system-ui,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:400;
--h-track:.02em;
--h-case:none;
--h-style:normal;
--h-lh:1.15;
--gap:24px;
--pad:24px;
--focus:rgba(255,122,217,.5);
--ok:#127A5A;
--warn:#8A5A00;
--danger:#C0265A;
--info:#3A5BFF;
--field-bg:var(--surface);
--field-shadow:none;
--media:radial-gradient(circle at 30% 25%,#fff 0 8%,transparent 30%),linear-gradient(135deg,#7FE7FF,#3A5BFF 50%,#FF7AD9);
--code-bg:#10153A;
--code-fg:#BFF4FF;
--btn-case:uppercase;
--btn-track:.08em;
--btn-weight:800;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:12.3px;
--fs-body:16px;
--fs-4:20.8px;
--fs-3:27.0px;
--fs-2:35.2px;
--fs-1:45.7px;
--fs-d:clamp(46px, 9vw, 100px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-body)/1.6 var(--font-b);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:var(--h-weight);letter-spacing:var(--h-track);text-transform:var(--h-case);font-style:var(--h-style);line-height:var(--h-lh);margin:0 0 .4em}
h1{font-size:var(--fs-1)} h2{font-size:var(--fs-2)} h3{font-size:var(--fs-3)} h4{font-size:var(--fs-4)}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
code,pre,kbd{font-family:var(--font-m)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:var(--btn-weight) 1rem/1 var(--font-b);text-transform:var(--btn-case);letter-spacing:var(--btn-track);padding:.85em 1.4em;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-sm);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background-color .12s,color .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-2{background:var(--accent2);color:var(--accent2-fg)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:none}
.btn-sm{font-size:.85rem;padding:.6em 1em}
.btn-lg{font-size:1.15rem;padding:1em 1.7em}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* forms */
.field{display:grid;gap:.4em;margin-bottom:1.1em}
.label{font-weight:600;font-size:.95rem}
.help{font-size:.85rem;color:var(--muted)}
.input,.select,.textarea{width:100%;font:1rem/1.4 var(--font-b);color:var(--fg);padding:.75em .9em;background:var(--field-bg);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--field-shadow);appearance:none}
.select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4em}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--field-shadow),0 0 0 3px var(--focus)}
.is-error .input{border-color:var(--danger)} .is-error .help{color:var(--danger)}
.choice{display:flex;align-items:center;gap:.6em;margin:.35em 0;cursor:pointer}
.check,.radio{appearance:none;width:1.25em;height:1.25em;margin:0;flex:none;border:var(--bw) solid var(--border);background:var(--field-bg);box-shadow:var(--field-shadow);display:grid;place-items:center;cursor:pointer}
.check{border-radius:calc(var(--radius-sm)/2)} .radio{border-radius:50%}
.check::after{content:"";width:.55em;height:.3em;border-left:2.5px solid var(--accent-fg);border-bottom:2.5px solid var(--accent-fg);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.radio::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--accent-fg);opacity:0}
.check:checked,.radio:checked{background:var(--accent);border-color:var(--border)}
.check:checked::after,.radio:checked::after{opacity:1}
.switch{appearance:none;width:2.8em;height:1.6em;margin:0;flex:none;border-radius:999px;border:var(--bw) solid var(--border);background:var(--surface2);position:relative;cursor:pointer;transition:background .15s;box-shadow:var(--field-shadow)}
.switch::before{content:"";position:absolute;top:50%;left:.18em;width:1.1em;height:1.1em;border-radius:50%;background:var(--fg);transform:translateY(-50%);transition:left .15s}
.switch:checked{background:var(--accent)}
.switch:checked::before{left:calc(100% - 1.28em);background:var(--accent-fg)}
.range{width:100%;accent-color:var(--accent)}
/* surfaces */
.card{background:var(--surface);color:var(--fg);border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);position:relative}
.card-media{aspect-ratio:16/9;border-radius:var(--radius-sm);background:var(--media);margin-bottom:1em}
.badge{display:inline-block;font:600 .75rem/1 var(--font-b);padding:.45em .75em;border-radius:var(--badge-radius);background:var(--accent2);color:var(--accent2-fg);border:var(--bw) solid var(--border)}
.alert{padding:1em 1.2em;border:var(--bw) solid var(--border);border-left:6px solid var(--c,var(--info));border-radius:var(--radius-sm);background:var(--surface);margin-bottom:.8em}
.alert b{color:var(--c,var(--info))}
.alert-ok{--c:var(--ok)} .alert-warn{--c:var(--warn)} .alert-danger{--c:var(--danger)}
.progress{height:.8em;border-radius:999px;background:var(--surface2);border:var(--bw) solid var(--border);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent)}
/* navigation */
.tabs{display:flex;gap:.25em;border-bottom:var(--bw) solid var(--border);flex-wrap:wrap}
.tab{font:600 .95rem var(--font-b);padding:.7em 1em;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer;margin-bottom:calc(var(--bw) * -1)}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.crumbs{display:flex;gap:.5em;flex-wrap:wrap;font-size:.9rem;color:var(--muted);list-style:none;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:.5em;opacity:.6}
.pager{display:flex;gap:.4em;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.pager a{display:grid;place-items:center;min-width:2.4em;height:2.4em;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);text-decoration:none;background:var(--surface)}
.pager a[aria-current]{background:var(--accent);color:var(--accent-fg)}
/* table */
.table-wrap{overflow-x:auto;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.table th,.table td{text-align:left;padding:.75em 1em;border-bottom:1px solid color-mix(in srgb,var(--border) 30%,transparent)}
.table th{font-family:var(--font-d);font-weight:var(--h-weight)}
/* grid */
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media (max-width:760px){.row{grid-template-columns:minmax(0,1fr);gap:min(var(--gap),16px)}.row>*{grid-column:auto!important;grid-row:auto!important}}
/* signature */
.btn{border-radius:999px;border:1px solid rgba(255,255,255,.8);background:linear-gradient(#8FA8FF,#3A5BFF 50%,#2340D8 51%,#5A7BFF);position:relative;overflow:hidden;text-shadow:0 1px 1px rgba(0,0,0,.3)}
.btn::after{content:"";position:absolute;left:8%;right:8%;top:3px;height:40%;border-radius:999px;background:linear-gradient(rgba(255,255,255,.8),rgba(255,255,255,.1));pointer-events:none}
.btn-2{background:linear-gradient(#FFC4EE,#FF7AD9 50%,#E44FBE 51%,#FF9BE3);color:#10153A;text-shadow:none}
.btn-ghost{background:linear-gradient(#fff,#DDE3F0 50%,#C3CBDD 51%,#EEF1F8);color:#10153A;text-shadow:none}
.card{backdrop-filter:blur(10px);border-color:rgba(255,255,255,.9)}
.badge{background:linear-gradient(#fff,#C3CBDD);border-color:#fff;color:#10153A;box-shadow:var(--shadow-sm)}
.input,.select,.textarea{border-radius:999px;background:linear-gradient(#EEF2FF,#fff);border-color:#8FA2E8;box-shadow:inset 0 2px 4px rgba(16,21,58,.15)}
.textarea{border-radius:18px}
.switch{background:linear-gradient(#C3CBDD,#EEF1F8)}
.switch::before{background:radial-gradient(circle at 35% 30%,#fff,#8FA8FF 60%,#3A5BFF);box-shadow:0 2px 4px rgba(0,0,0,.3)}
.progress{border-radius:999px;background:#fff}
.progress i{background:linear-gradient(#BFF4FF,#3A5BFF 50%,#2340D8 51%,#7FE7FF);border-radius:999px}
.check:checked,.radio:checked{background:radial-gradient(circle at 35% 30%,#fff,#3A5BFF 60%)}
.alert{border-radius:18px;background:rgba(255,255,255,.8);border-left-width:2px}
.tab{border-radius:999px;border:0;margin:0 2px}
.tab[aria-selected="true"]{background:linear-gradient(#fff,#DDE3F0);box-shadow:var(--shadow-sm)}
.tabs{border:0}
.pager a{border-radius:50%;background:linear-gradient(#fff,#DDE3F0)}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#0E1338;
--surface:rgba(255,255,255,.08);
--surface2:#151B4A;
--fg:#E8EEFF;
--muted:#AAB6E8;
--border:#5061C0;
--code-bg:#070A20;
}
html.alt body{background:radial-gradient(ellipse at 20% 0%,#2A3480 0,transparent 50%),radial-gradient(ellipse at 90% 40%,#4A1E5A 0,transparent 45%),#0E1338!important}html.alt .input,html.alt .select,html.alt .textarea{background:rgba(255,255,255,.08);color:#E8EEFF}html.alt .alert{background:rgba(255,255,255,.08)}html.alt .docnav{background:rgba(14,19,56,.7)!important}Three emphasis levels, three sizes and a disabled state. Keep one primary button per view.
<div class="demo-row">
<button class="btn">Primary</button>
<button class="btn btn-2">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn" disabled>Disabled</button>
</div>
<div class="demo-row" style="margin-top:14px">
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
</div>Text fields, choices and toggles share the same border, radius and focus ring, so a form reads as one family.
<form class="formgrid" onsubmit="return false">
<div>
<div class="field">
<label class="label" for="f-name">Full name</label>
<input class="input" id="f-name" placeholder="Ada Lovelace">
<span class="help">As it appears on your ID.</span>
</div>
<div class="field is-error">
<label class="label" for="f-mail">Email</label>
<input class="input" id="f-mail" type="email" value="ada@">
<span class="help">Enter a complete email address.</span>
</div>
<div class="field">
<label class="label" for="f-plan">Plan</label>
<select class="select" id="f-plan"><option>Starter</option><option>Studio</option><option>Team</option></select>
</div>
</div>
<div>
<div class="field">
<label class="label" for="f-msg">Message</label>
<textarea class="textarea" id="f-msg" placeholder="Tell us about your project"></textarea>
</div>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Interests</legend>
<label class="choice"><input type="checkbox" class="check" checked> Typography</label>
<label class="choice"><input type="checkbox" class="check"> Motion</label>
</fieldset>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Billing</legend>
<label class="choice"><input type="radio" name="bill" class="radio" checked> Monthly</label>
<label class="choice"><input type="radio" name="bill" class="radio"> Yearly</label>
</fieldset>
<label class="choice"><input type="checkbox" class="switch" checked> Email me updates</label>
<div class="field" style="margin-top:1em">
<label class="label" for="f-range">Budget</label>
<input class="range" id="f-range" type="range" value="60">
</div>
<button class="btn">Send request</button>
</div>
</form>A container for one idea. Media sits on top, then a badge, title, short text and one action.
<div class="auto">
<article class="card">
<div class="card-media"></div>
<span class="badge">New</span>
<h4 style="margin-top:.6em">Card title</h4>
<p>Short supporting text that explains what this card is about.</p>
<a class="btn btn-sm" href="#">Read more</a>
</article>
<article class="card">
<div class="card-media" style="filter:hue-rotate(40deg)"></div>
<span class="badge">Guide</span>
<h4 style="margin-top:.6em">Second card</h4>
<p>Cards in a row share height and spacing, so the grid stays calm.</p>
<a class="btn btn-sm btn-2" href="#">Open</a>
</article>
</div>Alerts, badges and progress tell people what just happened and what to do next.
<div class="alert"><b>Info.</b> Your draft saves every 30 seconds.</div>
<div class="alert alert-ok"><b>Saved.</b> Changes are live on your site.</div>
<div class="alert alert-warn"><b>Check this.</b> Two images are missing alt text.</div>
<div class="alert alert-danger"><b>Upload failed.</b> Files must be under 10 MB. Try a smaller file.</div>
<div class="demo-row" style="margin-top:14px">
<span class="badge">Default</span>
<span class="badge" style="background:var(--accent);color:var(--accent-fg)">Accent</span>
</div>
<div style="margin-top:18px"><div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress"><i style="width:64%"></i></div></div>Tables scroll sideways on small screens instead of squashing columns.
| Project | Owner | Status | Due |
|---|---|---|---|
| Homepage | Rūta | Review | 12 Oct |
| Checkout | Tomas | Draft | 19 Oct |
| Onboarding | Ieva | Live | 2 Oct |
<div class="table-wrap">
<table class="table">
<thead><tr><th>Project</th><th>Owner</th><th>Status</th><th>Due</th></tr></thead>
<tbody>
<tr><td>Homepage</td><td>Rūta</td><td><span class="badge">Review</span></td><td>12 Oct</td></tr>
<tr><td>Checkout</td><td>Tomas</td><td><span class="badge">Draft</span></td><td>19 Oct</td></tr>
<tr><td>Onboarding</td><td>Ieva</td><td><span class="badge">Live</span></td><td>2 Oct</td></tr>
</tbody>
</table>
</div>A ready prompt for AI design and coding tools. It names exact tokens and bans the usual defaults, so the output keeps this style's point of view.
Design a responsive landing page for a music festival for electronic pop in an authentic Y2K Aesthetic style.
Palette: Ice blue #D9E4FF, Electric blue #3A5BFF, Bubblegum #FF7AD9, Aqua #7FE7FF, Chrome #B8C4E0, Midnight #10153A.
Typography: Michroma for headings, Exo 2 for body and buttons (uppercase, tracked +0.08em on buttons).
Layout: Two-column hero: giant liquid-chrome headline on the left, floating glossy orbs and small four-point stars on the right. Frosted translucent panels below.
Signature details: Chrome gradient text with a dark horizon band across the middle, glossy highlights on the top 40% of buttons, translucent blue-tinted panels, blue-tinted shadows.
Components: Gel buttons with a white top highlight, pill inputs with inset shading, bubble toggles, orb-like radio buttons, chrome-edged badges.
Motion: Slow bobbing orbs, a spinning chrome core, twinkling stars, screensaver-like loops.
Avoid: flat design, dark moody palettes, serif fonts, chrome on paragraph text, hard black borders.
Do not fall back on generic AI defaults: no centered hero with a gradient blob, no identical rounded cards with soft grey shadows, no purple-to-blue gradients, no emoji icons, unless this style explicitly calls for them.
Accessibility: body text contrast of at least 4.5:1, visible keyboard focus on every control, labels on all form fields, and respect prefers-reduced-motion.
Deliver one self-contained HTML file with CSS variables for every color, font, radius and shadow token.Where this style usually goes wrong, and how to keep it honest.
Metallic gradients are for display type only. Body text needs a solid color.
If every surface shines, nothing does. Keep the full effect for buttons and hero objects.
Silver on ice blue can disappear. Check contrast on every label.
Stacking butterflies, flip phones and sparkles turns into parody. Pick one or two references.