Liquid Metal is a futuristic design aesthetic built around the visual language of chrome, mercury, and molten metallic surfaces. It draws heavily from the iconic T-1000 character in James Cameron’s Terminator 2: Judgment Day (1991), whose shapeshifting liquid chrome body became one of cinema’s most enduring visual effects. The aesthetic captures the uncanny beauty of mercury pooling and flowing – surfaces that are simultaneously solid and fluid, reflective yet formless. Where Chromecore celebrates the polished consumer hardware of the early 2000s, Liquid Metal pushes further into the surreal territory of metal that breathes, ripples, and morphs.
The style has surged in popularity across graphic design, fashion, and digital media since the early 2020s. As noted by AIGA’s Eye on Design, the futuristic gleam of liquid metal is everywhere right now, appearing in album covers, luxury fashion campaigns from houses like Balenciaga and Mugler, and experimental web design. Chrometype – flashy, often intentionally hard-to-read metallic typography – has become a dominant force on Instagram and in brand identity work. The aesthetic belongs to the broader acid graphics universe, featuring intricate layers of geometries, sinuous forms, and glaringly artificial surfaces that reject the orderliness of flat minimalism.
Liquid Metal designs are characterized by smooth, flowing metallic surfaces with intense specular highlights, warped reflections, and deep shadow pools. The color palette revolves around silver-mercury tones punctuated by cool blue reflections and warm amber caustics. Backgrounds are typically near-black to maximize the reflective drama of metallic elements. Three-dimensional rendering – whether through actual 3D software like Blender or cleverly layered CSS gradients – is central to the effect. Typography often appears extruded, dripping, or morphing, as though the letterforms themselves are made of liquid chrome. The overall mood is cold, futuristic, and hypnotic: a world where everything is reflective, everything is fluid, and nothing is quite solid.
The Liquid Metal palette is dominated by achromatic silver-gray tones that simulate polished chrome and mercury. Color enters only through reflected light – cool blues from the “sky” of the environment map, warm ambers from caustic light, and occasional iridescent shifts. The background is always dark to maximize reflective contrast.
| Swatch | Hex | Role / Usage |
|---|---|---|
| Void Black | #08080C |
Primary background, deepest shadows |
| Obsidian | #121218 |
Secondary background, card surfaces |
| Dark Chrome | #1E1E28 |
Elevated surfaces, panel backgrounds |
| Mercury Shadow | #3A3A48 |
Recessed areas, shadow gradients |
| Liquid Mercury | #757A81 |
Mid-tone metallic surfaces |
| Chrome Silver | #A8A9AD |
Standard metallic fill, borders |
| Polished Steel | #C0C4CC |
Bright metallic surfaces |
| Mercury Bright | #D8DBDE |
Highlight areas, near-white chrome |
| Specular White | #F0F2F5 |
Peak highlights, specular hot spots |
| Pure Glint | #FFFFFF |
Maximum reflection points |
| Reflection Blue | #4A7FBF |
Cool reflected light, environmental tint |
| Caustic Amber | #BF8A3A |
Warm reflected light, golden caustics |
| Iridescent Violet | #8A6FBF |
Subtle chromatic shift in reflections |
| Mercury Teal | #5A8F8F |
Secondary cool reflection accent |
| Deep Gunmetal | #2A2D35 |
Border color, structural elements |
:root {
/* Backgrounds */
--lm-bg-void: #08080c;
--lm-bg-dark: #121218;
--lm-bg-panel: #1e1e28;
--lm-bg-elevated: #2a2d35;
/* Mercury metallic scale */
--lm-mercury-shadow: #3a3a48;
--lm-mercury-mid: #757a81;
--lm-mercury-silver: #a8a9ad;
--lm-mercury-steel: #c0c4cc;
--lm-mercury-bright: #d8dbde;
--lm-mercury-highlight: #f0f2f5;
--lm-mercury-glint: #ffffff;
/* Reflection accents */
--lm-reflect-blue: #4a7fbf;
--lm-reflect-amber: #bf8a3a;
--lm-reflect-violet: #8a6fbf;
--lm-reflect-teal: #5a8f8f;
/* Text */
--lm-text-primary: #e8eaed;
--lm-text-secondary: #8a8d96;
--lm-text-chrome: linear-gradient(180deg, #ffffff 0%, #c0c4cc 35%, #757a81 55%, #a8a9ad 75%, #f0f2f5 100%);
/* Glows */
--lm-glow-silver: 0 0 15px rgba(192, 196, 204, 0.3), 0 0 45px rgba(192, 196, 204, 0.1);
--lm-glow-blue: 0 0 12px rgba(74, 127, 191, 0.4), 0 0 35px rgba(74, 127, 191, 0.12);
--lm-glow-amber: 0 0 12px rgba(191, 138, 58, 0.35), 0 0 35px rgba(191, 138, 58, 0.1);
/* Borders */
--lm-border-subtle: 1px solid rgba(168, 169, 173, 0.12);
--lm-border-chrome: 1px solid rgba(192, 196, 204, 0.25);
--lm-border-bright: 1px solid rgba(240, 242, 245, 0.35);
}
Liquid Metal typography treats text as a three-dimensional metallic object. Display headings often carry chrome gradients that simulate reflective metal surfaces, while body text remains clean and legible against dark backgrounds. The aesthetic draws from two typographic traditions: the spindly, angular letterforms rooted in metal and acid graphics subcultures, and the sleek geometric sans-serifs of futuristic industrial design. Decorative display fonts may push toward illegibility for artistic impact, but functional text maintains clarity.
| Font | Weight(s) | Style | Best For |
|---|---|---|---|
| Orbitron | 400, 700, 900 | Geometric, square, futuristic | Hero headlines, display titles |
| Exo 2 | 300, 400, 600 | Geometric, futuristic sans | Section headings, subheadings |
| Michroma | 400 | Wide, futuristic display | Large display text, branding |
| Rajdhani | 300, 500, 700 | Condensed, technical | Labels, UI elements, captions |
| Space Grotesk | 400, 500, 700 | Proportional, techy | Subheadings, navigation |
| Inter | 300, 400, 500 | Clean, neutral, modern | Body text, paragraphs |
| IBM Plex Sans | 300, 400, 500 | Technical, precise | Body copy, data display |
| Bebas Neue | 400 | Tall, condensed display | Impactful headlines, overlays |
| Heading Font | Body Font | Character |
|---|---|---|
| Orbitron (900) | Inter (300) | Maximum contrast; bold chrome display against clean readable body |
| Michroma (400) | IBM Plex Sans (300) | Wide futuristic headings with precise, technical body text |
| Exo 2 (600) | Space Grotesk (400) | Balanced futuristic pairing; both geometric, differentiated by weight |
| Bebas Neue (400) | Inter (400) | Tall condensed headlines for dramatic vertical impact |
| Rajdhani (700) | IBM Plex Sans (400) | Condensed tech headers with clean professional body |
/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@300;400;600&family=Inter:wght@300;400;500&display=swap');
/* Headings */
h1, h2, h3, h4, h5, h6 {
font-family: 'Exo 2', 'Orbitron', sans-serif;
font-weight: 600;
color: var(--lm-text-primary);
letter-spacing: 0.06em;
line-height: 1.15;
}
/* Display / Hero text with chrome gradient */
.lm-display {
font-family: 'Orbitron', sans-serif;
font-size: clamp(3rem, 7vw, 6rem);
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.05;
background: linear-gradient(
180deg,
#ffffff 0%,
#d8dbde 20%,
#757a81 48%,
#a8a9ad 62%,
#f0f2f5 85%,
#ffffff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}
/* Body text */
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 300;
font-size: 1rem;
line-height: 1.7;
letter-spacing: 0.01em;
color: var(--lm-text-secondary);
-webkit-font-smoothing: antialiased;
}
/* Technical label */
.lm-label {
font-family: 'Rajdhani', 'Space Grotesk', sans-serif;
font-size: 0.7rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--lm-mercury-mid);
}
.lm-card {
background: linear-gradient(
165deg,
rgba(42, 45, 53, 0.9) 0%,
rgba(30, 30, 40, 0.95) 100%
);
border: 1px solid rgba(168, 169, 173, 0.15);
border-radius: 16px;
padding: 2rem;
position: relative;
overflow: hidden;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
/* Chrome highlight along top edge */
.lm-card::before {
content: '';
position: absolute;
top: 0;
left: 8%;
right: 8%;
height: 1px;
background: linear-gradient(
90deg,
transparent,
rgba(240, 242, 245, 0.5) 30%,
rgba(255, 255, 255, 0.7) 50%,
rgba(240, 242, 245, 0.5) 70%,
transparent
);
}
/* Subtle metallic sheen overlay */
.lm-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 40%;
background: linear-gradient(
180deg,
rgba(192, 196, 204, 0.04) 0%,
transparent 100%
);
pointer-events: none;
border-radius: 16px 16px 0 0;
}
.lm-card:hover {
border-color: rgba(192, 196, 204, 0.3);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.5),
0 0 20px rgba(192, 196, 204, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* Card grid */
.lm-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
}
.lm-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 36px;
border: none;
border-radius: 100px;
font-family: 'Exo 2', sans-serif;
font-weight: 600;
font-size: 0.85rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--lm-bg-void);
cursor: pointer;
position: relative;
overflow: hidden;
background: linear-gradient(
180deg,
#f0f2f5 0%,
#c0c4cc 25%,
#757a81 55%,
#a8a9ad 75%,
#d8dbde 100%
);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.6),
inset 0 -1px 0 rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
/* Glossy highlight */
.lm-button::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.35) 0%,
rgba(255, 255, 255, 0.05) 100%
);
border-radius: 100px 100px 0 0;
pointer-events: none;
}
.lm-button:hover {
background: linear-gradient(
180deg,
#ffffff 0%,
#d8dbde 25%,
#a8a9ad 55%,
#c0c4cc 75%,
#f0f2f5 100%
);
box-shadow:
0 6px 24px rgba(0, 0, 0, 0.4),
0 0 20px rgba(192, 196, 204, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.7),
inset 0 -1px 0 rgba(0, 0, 0, 0.15);
transform: translateY(-1px);
}
/* Ghost / outline variant */
.lm-button--ghost {
background: transparent;
border: 1px solid var(--lm-mercury-silver);
color: var(--lm-mercury-steel);
box-shadow: none;
}
.lm-button--ghost::before {
display: none;
}
.lm-button--ghost:hover {
background: rgba(168, 169, 173, 0.1);
border-color: var(--lm-mercury-bright);
color: var(--lm-mercury-bright);
box-shadow: var(--lm-glow-silver);
transform: translateY(-1px);
}
.lm-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 40px;
background: rgba(8, 8, 12, 0.88);
backdrop-filter: blur(16px) saturate(120%);
-webkit-backdrop-filter: blur(16px) saturate(120%);
border-bottom: 1px solid rgba(168, 169, 173, 0.1);
}
.lm-nav__logo {
font-family: 'Orbitron', sans-serif;
font-weight: 900;
font-size: 1.15rem;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.12em;
background: linear-gradient(
180deg,
#ffffff 0%,
#c0c4cc 50%,
#757a81 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.lm-nav__links {
display: flex;
gap: 32px;
list-style: none;
margin: 0;
padding: 0;
}
.lm-nav__links a {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.85rem;
font-weight: 500;
color: var(--lm-text-secondary);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.06em;
position: relative;
transition: color 0.3s ease;
}
.lm-nav__links a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 1px;
background: linear-gradient(
90deg,
var(--lm-mercury-silver),
var(--lm-mercury-bright)
);
transition: width 0.3s ease;
}
.lm-nav__links a:hover {
color: var(--lm-mercury-bright);
}
.lm-nav__links a:hover::after {
width: 100%;
}
.lm-nav__links a.active {
color: var(--lm-mercury-highlight);
}
.lm-nav__links a.active::after {
width: 100%;
background: var(--lm-mercury-highlight);
}
.lm-hero {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 100px 40px;
background: var(--lm-bg-void);
overflow: hidden;
}
/* Mercury pool reflection at the bottom */
.lm-hero::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 35%;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(120, 124, 132, 0.03) 40%,
rgba(168, 169, 173, 0.06) 70%,
rgba(192, 196, 204, 0.08) 100%
);
pointer-events: none;
}
/* Subtle radial light source from above */
.lm-hero::after {
content: '';
position: absolute;
top: -20%;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 60%;
background: radial-gradient(
ellipse at center,
rgba(192, 196, 204, 0.06) 0%,
transparent 70%
);
pointer-events: none;
}
.lm-hero__content {
position: relative;
z-index: 2;
max-width: 800px;
}
.lm-hero__title {
font-family: 'Orbitron', sans-serif;
font-size: clamp(3rem, 8vw, 7rem);
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.05;
margin-bottom: 1.5rem;
background: linear-gradient(
180deg,
#ffffff 0%,
#e8eaed 15%,
#c0c4cc 30%,
#757a81 50%,
#a8a9ad 65%,
#d8dbde 80%,
#ffffff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7));
}
.lm-hero__subtitle {
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: clamp(1rem, 2vw, 1.25rem);
color: var(--lm-text-secondary);
max-width: 550px;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
@media (max-width: 768px) {
.lm-hero {
min-height: auto;
padding: 80px 20px;
}
}
/* Vertical chrome gradient -- simulates cylindrical metal reflection */
.lm-chrome-surface {
background: linear-gradient(
180deg,
#f0f2f5 0%,
#d8dbde 15%,
#a8a9ad 30%,
#757a81 50%,
#a8a9ad 65%,
#c0c4cc 80%,
#f0f2f5 100%
);
}
/* Chrome text effect */
.lm-chrome-text {
background: linear-gradient(
180deg,
#ffffff 0%,
#c0c4cc 35%,
#5a5d66 52%,
#a8a9ad 68%,
#f0f2f5 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Animated shimmer -- light sliding across a metallic surface */
@keyframes lm-shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
.lm-shimmer {
background: linear-gradient(
105deg,
rgba(168, 169, 173, 0) 0%,
rgba(168, 169, 173, 0) 35%,
rgba(240, 242, 245, 0.25) 45%,
rgba(255, 255, 255, 0.4) 50%,
rgba(240, 242, 245, 0.25) 55%,
rgba(168, 169, 173, 0) 65%,
rgba(168, 169, 173, 0) 100%
);
background-size: 200% 100%;
animation: lm-shimmer 4s ease-in-out infinite;
}
/* Reflection effect below an element -- simulates mercury pool */
.lm-reflect {
position: relative;
z-index: 1;
}
.lm-reflect::after {
content: '';
position: absolute;
bottom: -45%;
left: 5%;
right: 5%;
height: 45%;
background: inherit;
transform: scaleY(-1);
mask-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.2) 0%,
rgba(0, 0, 0, 0.05) 50%,
transparent 100%
);
-webkit-mask-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.2) 0%,
rgba(0, 0, 0, 0.05) 50%,
transparent 100%
);
filter: blur(3px);
pointer-events: none;
z-index: -1;
}
/* Beveled chrome border effect */
.lm-bevel {
border: 1px solid rgba(168, 169, 173, 0.3);
box-shadow:
inset 1px 1px 0 rgba(255, 255, 255, 0.25),
inset -1px -1px 0 rgba(0, 0, 0, 0.3),
0 4px 16px rgba(0, 0, 0, 0.5);
}
/* Chrome frame -- like a metallic picture frame */
.lm-chrome-frame {
border-radius: 12px;
padding: 3px;
background: linear-gradient(
145deg,
#d8dbde 0%,
#757a81 30%,
#a8a9ad 50%,
#3a3a48 70%,
#c0c4cc 100%
);
}
.lm-chrome-frame__inner {
background: var(--lm-bg-dark);
border-radius: 10px;
padding: 2rem;
}
/* Concentric ripple effect -- mercury surface disturbance */
@keyframes lm-ripple {
0% {
transform: scale(0.8);
opacity: 0.6;
}
100% {
transform: scale(2.5);
opacity: 0;
}
}
.lm-ripple {
position: relative;
}
.lm-ripple::before,
.lm-ripple::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
border: 1px solid rgba(192, 196, 204, 0.3);
border-radius: 50%;
animation: lm-ripple 3s ease-out infinite;
}
.lm-ripple::after {
animation-delay: 1s;
}
| Aesthetic | Relationship to Liquid Metal |
|---|---|
| Chromecore | Close sibling; both celebrate metallic surfaces, but Chromecore focuses on polished consumer hardware and Y2K nostalgia while Liquid Metal embraces fluid, morphing, surreal forms |
| Acid Design | Parent universe; Liquid Metal shares acid graphics’ rejection of minimalism and love of extreme visual treatments, especially distorted 3D chrome typography |
| Y2K Futurism | Historical precursor; late-90s techno-optimism with silver and glass, of which Liquid Metal is a darker, more mature evolution |
| Cyberpunk | Shares the dark backgrounds and technological mood, but Cyberpunk is neon-lit and dystopian-urban while Liquid Metal is monochrome and abstractly futuristic |
| Glassmorphism | Both use translucency and depth effects, but Glassmorphism is soft, frosted, and colorful while Liquid Metal is hard, reflective, and achromatic |
| Dark Mode Neon | Shares the dark canvas, but substitutes vibrant neon color for metallic silver as the primary accent |
| Cybersigilism | Shares metallic textures and dark backgrounds; Cybersigilism adds tribal and occult symbolism to the chrome treatment |
| Vaporwave | Both reference chrome and metallic surfaces, but Vaporwave is ironic, pastel-tinted, and retro while Liquid Metal is earnest and hyper-modern |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liquid Metal</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@300;400;600&family=Inter:wght@300;400;500&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
<style>
/* ==========================================
CSS CUSTOM PROPERTIES
========================================== */
:root {
/* Backgrounds */
--lm-bg-void: #08080c;
--lm-bg-dark: #121218;
--lm-bg-panel: #1e1e28;
--lm-bg-elevated: #2a2d35;
/* Mercury metallic scale */
--lm-mercury-shadow: #3a3a48;
--lm-mercury-mid: #757a81;
--lm-mercury-silver: #a8a9ad;
--lm-mercury-steel: #c0c4cc;
--lm-mercury-bright: #d8dbde;
--lm-mercury-highlight: #f0f2f5;
--lm-mercury-glint: #ffffff;
/* Reflection accents */
--lm-reflect-blue: #4a7fbf;
--lm-reflect-amber: #bf8a3a;
/* Text */
--lm-text-primary: #e8eaed;
--lm-text-secondary: #8a8d96;
/* Glows */
--lm-glow-silver: 0 0 15px rgba(192, 196, 204, 0.3),
0 0 45px rgba(192, 196, 204, 0.1);
}
/* ==========================================
RESET & BASE
========================================== */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
background: var(--lm-bg-void);
color: var(--lm-text-secondary);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 300;
font-size: 1rem;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Exo 2', sans-serif;
font-weight: 600;
color: var(--lm-text-primary);
letter-spacing: 0.04em;
line-height: 1.15;
}
a {
color: var(--lm-mercury-steel);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: var(--lm-mercury-highlight);
}
img {
max-width: 100%;
display: block;
}
/* ==========================================
NAVIGATION
========================================== */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 40px;
background: rgba(8, 8, 12, 0.88);
backdrop-filter: blur(16px) saturate(120%);
-webkit-backdrop-filter: blur(16px) saturate(120%);
border-bottom: 1px solid rgba(168, 169, 173, 0.1);
}
.nav__logo {
font-family: 'Orbitron', sans-serif;
font-weight: 900;
font-size: 1.15rem;
text-transform: uppercase;
letter-spacing: 0.12em;
background: linear-gradient(
180deg,
#ffffff 0%,
#c0c4cc 50%,
#757a81 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.nav__links {
display: flex;
gap: 32px;
list-style: none;
}
.nav__links a {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.85rem;
font-weight: 500;
color: var(--lm-text-secondary);
text-transform: uppercase;
letter-spacing: 0.06em;
position: relative;
}
.nav__links a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 1px;
background: linear-gradient(
90deg,
var(--lm-mercury-silver),
var(--lm-mercury-bright)
);
transition: width 0.3s ease;
}
.nav__links a:hover {
color: var(--lm-mercury-bright);
}
.nav__links a:hover::after {
width: 100%;
}
/* ==========================================
HERO SECTION
========================================== */
.hero {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 120px 40px 80px;
overflow: hidden;
}
/* Mercury pool at the bottom */
.hero::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 30%;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(120, 124, 132, 0.03) 40%,
rgba(168, 169, 173, 0.05) 70%,
rgba(192, 196, 204, 0.07) 100%
);
pointer-events: none;
}
/* Radial light from above */
.hero::after {
content: '';
position: absolute;
top: -15%;
left: 50%;
transform: translateX(-50%);
width: 70%;
height: 50%;
background: radial-gradient(
ellipse at center,
rgba(192, 196, 204, 0.05) 0%,
transparent 70%
);
pointer-events: none;
}
.hero__content {
position: relative;
z-index: 2;
max-width: 850px;
}
.hero__label {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.7rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.25em;
color: var(--lm-mercury-mid);
margin-bottom: 1.5rem;
}
.hero__title {
font-family: 'Orbitron', sans-serif;
font-size: clamp(3rem, 8vw, 6.5rem);
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.05;
margin-bottom: 1.5rem;
background: linear-gradient(
180deg,
#ffffff 0%,
#e8eaed 12%,
#c0c4cc 28%,
#757a81 48%,
#a8a9ad 62%,
#d8dbde 80%,
#ffffff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7));
}
.hero__subtitle {
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: clamp(1rem, 1.8vw, 1.2rem);
color: var(--lm-text-secondary);
max-width: 520px;
margin: 0 auto 2.5rem;
line-height: 1.75;
}
.hero__actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
/* ==========================================
CHROME DIVIDER
========================================== */
.chrome-divider {
width: 50%;
max-width: 400px;
margin: 0 auto;
border: none;
height: 1px;
background: linear-gradient(
90deg,
transparent,
rgba(168, 169, 173, 0.15) 15%,
rgba(192, 196, 204, 0.4) 40%,
rgba(240, 242, 245, 0.6) 50%,
rgba(192, 196, 204, 0.4) 60%,
rgba(168, 169, 173, 0.15) 85%,
transparent
);
}
/* ==========================================
BUTTONS
========================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 36px;
border-radius: 100px;
font-family: 'Exo 2', sans-serif;
font-weight: 600;
font-size: 0.85rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
border: none;
}
.btn--chrome {
color: var(--lm-bg-void);
background: linear-gradient(
180deg,
#f0f2f5 0%,
#c0c4cc 25%,
#757a81 55%,
#a8a9ad 75%,
#d8dbde 100%
);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.6),
inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.btn--chrome::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.35) 0%,
rgba(255, 255, 255, 0.05) 100%
);
border-radius: 100px 100px 0 0;
pointer-events: none;
}
.btn--chrome:hover {
transform: translateY(-2px);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.4),
0 0 20px rgba(192, 196, 204, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.btn--ghost {
background: transparent;
border: 1px solid var(--lm-mercury-silver);
color: var(--lm-mercury-steel);
}
.btn--ghost:hover {
background: rgba(168, 169, 173, 0.08);
border-color: var(--lm-mercury-bright);
color: var(--lm-mercury-bright);
box-shadow: var(--lm-glow-silver);
transform: translateY(-2px);
}
/* ==========================================
SECTIONS
========================================== */
.section {
padding: 100px 40px;
max-width: 1200px;
margin: 0 auto;
}
.section__header {
text-align: center;
margin-bottom: 60px;
}
.section__label {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.7rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.25em;
color: var(--lm-mercury-mid);
margin-bottom: 1rem;
}
.section__title {
font-family: 'Orbitron', sans-serif;
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: 700;
background: linear-gradient(
180deg,
#ffffff 0%,
#c0c4cc 40%,
#757a81 60%,
#c0c4cc 80%,
#f0f2f5 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ==========================================
FEATURE CARDS
========================================== */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
}
.card {
background: linear-gradient(
165deg,
rgba(42, 45, 53, 0.9) 0%,
rgba(30, 30, 40, 0.95) 100%
);
border: 1px solid rgba(168, 169, 173, 0.12);
border-radius: 16px;
padding: 2rem;
position: relative;
overflow: hidden;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}
/* Chrome highlight along top */
.card::before {
content: '';
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 1px;
background: linear-gradient(
90deg,
transparent,
rgba(240, 242, 245, 0.4) 30%,
rgba(255, 255, 255, 0.6) 50%,
rgba(240, 242, 245, 0.4) 70%,
transparent
);
}
/* Subtle metallic sheen */
.card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 35%;
background: linear-gradient(
180deg,
rgba(192, 196, 204, 0.03) 0%,
transparent 100%
);
pointer-events: none;
border-radius: 16px 16px 0 0;
}
.card:hover {
border-color: rgba(192, 196, 204, 0.25);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.5),
0 0 20px rgba(192, 196, 204, 0.06);
transform: translateY(-4px);
}
.card__icon {
width: 48px;
height: 48px;
border-radius: 12px;
margin-bottom: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
background: linear-gradient(
145deg,
rgba(168, 169, 173, 0.15) 0%,
rgba(117, 122, 129, 0.08) 100%
);
border: 1px solid rgba(168, 169, 173, 0.1);
}
.card__title {
font-family: 'Exo 2', sans-serif;
font-size: 1.15rem;
font-weight: 600;
color: var(--lm-text-primary);
margin-bottom: 0.75rem;
}
.card__text {
font-size: 0.95rem;
color: var(--lm-text-secondary);
line-height: 1.65;
}
/* ==========================================
SHOWCASE / CHROME OBJECT
========================================== */
.showcase {
padding: 100px 40px;
text-align: center;
}
.chrome-sphere {
width: 200px;
height: 200px;
margin: 0 auto 3rem;
border-radius: 50%;
background: radial-gradient(
circle at 35% 35%,
#ffffff 0%,
#f0f2f5 8%,
#d8dbde 18%,
#a8a9ad 35%,
#757a81 55%,
#3a3a48 75%,
#1e1e28 100%
);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.6),
0 0 40px rgba(192, 196, 204, 0.08),
inset 0 -5px 15px rgba(0, 0, 0, 0.4);
position: relative;
}
/* Specular highlight */
.chrome-sphere::before {
content: '';
position: absolute;
top: 15%;
left: 22%;
width: 25%;
height: 18%;
background: radial-gradient(
ellipse at center,
rgba(255, 255, 255, 0.9) 0%,
rgba(255, 255, 255, 0.3) 40%,
transparent 70%
);
border-radius: 50%;
transform: rotate(-15deg);
}
/* Secondary reflection */
.chrome-sphere::after {
content: '';
position: absolute;
bottom: 25%;
right: 18%;
width: 12%;
height: 8%;
background: radial-gradient(
ellipse at center,
rgba(74, 127, 191, 0.3) 0%,
transparent 80%
);
border-radius: 50%;
}
/* ==========================================
CTA SECTION
========================================== */
.cta {
text-align: center;
padding: 100px 40px;
position: relative;
}
.cta::before {
content: '';
position: absolute;
top: 0;
left: 20%;
right: 20%;
height: 1px;
background: linear-gradient(
90deg,
transparent,
rgba(192, 196, 204, 0.3) 30%,
rgba(240, 242, 245, 0.5) 50%,
rgba(192, 196, 204, 0.3) 70%,
transparent
);
}
.cta__title {
font-family: 'Orbitron', sans-serif;
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 1rem;
background: linear-gradient(
180deg,
#ffffff 0%,
#d8dbde 25%,
#757a81 50%,
#a8a9ad 70%,
#f0f2f5 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.cta__text {
font-size: 1.1rem;
color: var(--lm-text-secondary);
max-width: 480px;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
/* ==========================================
FOOTER
========================================== */
.footer {
text-align: center;
padding: 40px;
border-top: 1px solid rgba(168, 169, 173, 0.08);
}
.footer__text {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
font-weight: 400;
color: var(--lm-mercury-mid);
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* ==========================================
SHIMMER ANIMATION
========================================== */
@keyframes shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
.shimmer-line {
width: 60%;
max-width: 300px;
height: 1px;
margin: 2rem auto;
background: linear-gradient(
105deg,
rgba(168, 169, 173, 0) 0%,
rgba(168, 169, 173, 0) 30%,
rgba(240, 242, 245, 0.4) 45%,
rgba(255, 255, 255, 0.6) 50%,
rgba(240, 242, 245, 0.4) 55%,
rgba(168, 169, 173, 0) 70%,
rgba(168, 169, 173, 0) 100%
);
background-size: 200% 100%;
animation: shimmer 4s ease-in-out infinite;
}
/* ==========================================
RESPONSIVE
========================================== */
@media (max-width: 768px) {
.nav {
padding: 14px 20px;
}
.nav__links {
gap: 18px;
}
.nav__links a {
font-size: 0.75rem;
}
.hero {
padding: 100px 20px 60px;
min-height: auto;
}
.hero__actions {
flex-direction: column;
align-items: center;
}
.section {
padding: 60px 20px;
}
.card-grid {
grid-template-columns: 1fr;
}
.chrome-sphere {
width: 140px;
height: 140px;
}
.cta {
padding: 60px 20px;
}
}
</style>
</head>
<body>
<!-- ========== NAVIGATION ========== -->
<nav class="nav">
<a href="#" class="nav__logo">Mercurial</a>
<ul class="nav__links">
<li><a href="#features">Process</a></li>
<li><a href="#showcase">Showcase</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<!-- ========== HERO ========== -->
<section class="hero">
<div class="hero__content">
<p class="hero__label">Design Studio — Est. 2025</p>
<h1 class="hero__title">Liquid Metal</h1>
<p class="hero__subtitle">
Reflective surfaces. Mercury fluidity. Chrome precision.
We shape molten ideas into polished digital experiences.
</p>
<div class="hero__actions">
<a href="#features" class="btn btn--chrome">Explore</a>
<a href="#contact" class="btn btn--ghost">Get in touch</a>
</div>
</div>
</section>
<!-- ========== CHROME DIVIDER ========== -->
<hr class="chrome-divider">
<!-- ========== FEATURES ========== -->
<section class="section" id="features">
<div class="section__header">
<p class="section__label">What we do</p>
<h2 class="section__title">Our Process</h2>
</div>
<div class="card-grid">
<div class="card">
<div class="card__icon">◊</div>
<h3 class="card__title">Forge</h3>
<p class="card__text">
Raw concepts are heated and hammered into form.
Every idea begins as molten potential, shaped by
research, strategy, and creative pressure.
</p>
</div>
<div class="card">
<div class="card__icon">◯</div>
<h3 class="card__title">Polish</h3>
<p class="card__text">
Surfaces are refined to mirror-finish perfection.
Typography, spacing, and color are calibrated until
every pixel reflects intention.
</p>
</div>
<div class="card">
<div class="card__icon">△</div>
<h3 class="card__title">Cast</h3>
<p class="card__text">
The final form is set in chrome. Responsive layouts,
smooth interactions, and fluid animations bring the
metallic vision to life across every device.
</p>
</div>
</div>
</section>
<!-- ========== SHIMMER LINE ========== -->
<div class="shimmer-line"></div>
<!-- ========== SHOWCASE ========== -->
<section class="showcase" id="showcase">
<div class="chrome-sphere"></div>
<div class="section__header">
<p class="section__label">Pure Form</p>
<h2 class="section__title">Chrome Sphere</h2>
</div>
<p style="max-width: 500px; margin: 0 auto; color: var(--lm-text-secondary); line-height: 1.7;">
A single sphere rendered in pure CSS gradients demonstrates
the power of light, shadow, and reflection. No images required
— only carefully placed color stops that simulate the
physics of polished metal.
</p>
</section>
<!-- ========== CTA ========== -->
<section class="cta" id="contact">
<h2 class="cta__title">Ready to forge?</h2>
<p class="cta__text">
Let us transform your vision into something that gleams.
Every surface tells a story.
</p>
<a href="#" class="btn btn--chrome">Start a project</a>
</section>
<!-- ========== FOOTER ========== -->
<footer class="footer">
<p class="footer__text">
Mercurial Studio — Forged in liquid chrome
</p>
</footer>
</body>
</html>
background-clip: text for chrome typography – apply metallic linear gradients as text fills using -webkit-background-clip: text and -webkit-text-fill-color: transparent; add filter: drop-shadow() for depth since text-shadow does not work with clipped backgroundsradial-gradient with the highlight offset toward the upper-left (light source) and darkness spreading toward the lower-rightease-in-out timing with durations of 3-6 seconds for shimmer effects and 2-4 seconds for transitions; fast animation breaks the illusion of weightbackground-clip: text – while widely supported, use @supports to provide a solid silver color fallback for any browsers that do not support the text clipping techniqueinset box-shadows for bevel effects – combining inset 0 1px 0 rgba(255,255,255,0.3) (top highlight) with inset 0 -1px 0 rgba(0,0,0,0.2) (bottom shadow) creates a convincing metallic edge on buttons and cards::before for glossy highlight overlays and ::after for reflection effects or subtle metallic sheens; this avoids adding extra HTML elements while building visual depth