Agence WagnerAgence Wagner
FRENDEELS
Zurück zu den Designs
FuturisteGradientsGlassIndustriel
Vorschau

Liquid Metal Design Reference

Overview

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.

Visual Characteristics

Core Design Traits

  • Mercury-like fluid surfaces -- elements appear to be made of liquid metal that pools, flows, and morphs organically rather than sitting in rigid geometric forms
  • Intense specular highlights -- bright white-to-silver hot spots that simulate light reflecting off highly polished curved metal surfaces
  • Deep shadow gradients -- dark chrome valleys and recesses that create dramatic contrast against bright reflections
  • Warped environmental reflections -- distorted mirror images on metallic surfaces suggesting a surrounding environment reflected in curved chrome
  • Blob-like organic shapes -- rounded, amorphous silhouettes reminiscent of mercury droplets merging and separating
  • Chrome text and 3D typography -- letterforms that appear extruded from or dripping with liquid metal, often with multi-stop metallic gradients applied
  • Iridescent color shifts -- subtle rainbow or cool-blue tints that appear in the reflective surfaces, mimicking real chromatic aberration on polished metal
  • Dark, high-contrast backgrounds -- near-black environments that make metallic elements appear to float and glow by contrast
  • Smooth, seamless surfaces -- no grain, no texture, no imperfection; every surface is impossibly polished and frictionless
  • Motion and fluidity cues -- design elements that suggest movement through elongated reflections, trailing droplets, or ripple distortions

Design Principles

  • Reflectivity is the primary visual device -- every key element should appear to mirror its surroundings or emit metallic sheen
  • Darkness frames the metal -- dark backgrounds are essential to sell the illusion of reflective chrome; light backgrounds flatten the effect
  • Less is more with color -- the palette is almost monochromatic (silver, black, white) with only the subtlest chromatic shifts in reflections
  • Depth through lighting, not layering -- the illusion of 3D comes from carefully placed highlights and shadows rather than stacked elements
  • Organic over geometric -- shapes should feel fluid and natural rather than rigid and angular; curves dominate straight lines
  • Typography as sculpture -- text is treated as a three-dimensional object, not a flat overlay; it should appear to have volume, weight, and reflectivity
  • Restraint with animation -- subtle ripple or morph effects are far more effective than fast or chaotic motion; liquid metal moves slowly and heavily
  • Surface tension as metaphor -- design elements should feel as though they are held together by surface tension, ready to split or merge at any moment

Color Palette

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

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;
  --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);
}

Typography

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

Font Pairing Suggestions

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

Typography CSS Example

/* 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);
}

Layout Principles

  • Dark canvas is mandatory -- Liquid Metal designs require near-black backgrounds to create the contrast needed for metallic reflections to read as luminous and reflective
  • Center-weighted compositions -- metallic hero elements and display typography typically anchor to the center of the viewport, drawing the eye to the brightest point of reflection
  • Generous negative space -- chrome surfaces need darkness around them to create the illusion of a reflective object floating in a void; crowded layouts diminish the effect
  • Vertical chrome gradients -- metallic surfaces read most convincingly when their gradient runs top-to-bottom, simulating a cylindrical or spherical reflection map
  • Layered depth through luminance -- brighter metallic elements appear closer to the viewer; darker, more muted elements recede; this replaces traditional shadow-based depth
  • Organic flow over rigid grids -- while structural grids underpin the layout, visible shapes and containers should favor rounded, blobby, or flowing outlines over sharp rectangles
  • Reflective surface zones -- key sections can include a faint mirrored reflection below elements, simulating a polished floor or mercury pool beneath
  • Horizontal dividers as light bands -- section separators work best as thin metallic gradient lines that simulate a streak of reflected light
  • Minimal text density -- the aesthetic favors short, impactful text blocks; long paragraphs undermine the sculptural, image-first quality of the design
  • Full-bleed metallic hero -- the hero section should dominate the viewport with a large-scale chrome text treatment or rendered metallic object

CSS / Design Techniques

Liquid Metal Card

.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;
}

Liquid Metal Button

.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);
}

Liquid Metal Navigation

.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);
}

Liquid Metal Hero Section

.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;
  }
}

Chrome Surface Gradient Effects

/* 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;
}

Mercury Pool Reflection

/* 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;
}

Metallic Bevel and Emboss

/* 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;
}

Liquid Ripple Animation

/* 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;
}

Design Do's and Don'ts

Do's

  • Use dark backgrounds -- near-black (#08080C to #121218) is essential; metallic effects lose all impact on light backgrounds
  • Apply multi-stop gradients for chrome -- use at least 5-7 color stops in metallic gradients; too few stops look flat rather than reflective
  • Keep the palette achromatic -- silver, gray, black, and white should dominate; color enters only through subtle reflected tints
  • Treat typography as sculpture -- display text should carry chrome gradients and appear three-dimensional; flat text on a metallic page looks disconnected
  • Use generous whitespace (dark space) -- let metallic elements breathe within expanses of void; the darkness is part of the composition
  • Add subtle animation -- slow shimmers, gentle ripples, and gradual morphs reinforce the liquid quality without overwhelming the viewer
  • Include specular highlights -- bright white hot spots are what sell the illusion of polished metal; without them, surfaces look matte and dull
  • Pair with high-quality imagery -- if using photographs, chrome-themed product shots or 3D renders of metallic objects maintain visual consistency

Don'ts

  • Avoid bright or colorful backgrounds -- pastels, white, and vivid gradients destroy the metallic illusion; Liquid Metal lives in darkness
  • Do not use textured or grainy surfaces -- mercury and chrome are impossibly smooth; grain, noise, and roughness contradict the aesthetic
  • Avoid rounded, bubbly, or playful typography -- comic sans, handwriting fonts, and overly friendly typefaces clash with the cold, futuristic mood
  • Do not overuse iridescent effects -- subtle chromatic shifts are elegant; full rainbow iridescence pushes the design toward holographic or vaporwave territory
  • Avoid flat, single-color fills on metallic elements -- a solid silver rectangle looks like a gray box, not liquid metal; gradients are essential
  • Do not animate too quickly -- liquid metal is dense and heavy; fast motion suggests lightweight or digital rather than metallic and physical
  • Avoid cluttered layouts -- information density fights the sculptural, art-directed nature of the aesthetic; show less, show it bigger
  • Do not mix warm color schemes -- warm earth tones, terracotta, and wood textures belong to entirely different design languages
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

Quick-Start HTML Template

<!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 &mdash; 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">&#9674;</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">&#9711;</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">&#9651;</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
      &mdash; 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 &mdash; Forged in liquid chrome
    </p>
  </footer>

</body>
</html>

Implementation Tips

  • Multi-stop gradients are essential -- realistic chrome effects require at least 5-7 color stops in a linear gradient; the key is alternating between light (#f0f2f5), mid (#a8a9ad), dark (#757a81), and back to light, simulating the way a curved metal surface catches and loses light across its contour
  • Use 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 backgrounds
  • Radial gradients sell spherical metal -- for round objects like chrome spheres or mercury droplets, use radial-gradient with the highlight offset toward the upper-left (light source) and darkness spreading toward the lower-right
  • Keep animation slow and heavy -- liquid metal is dense; animations should use ease-in-out timing with durations of 3-6 seconds for shimmer effects and 2-4 seconds for transitions; fast animation breaks the illusion of weight
  • Test on dark backgrounds only -- always verify metallic elements against backgrounds in the #08080C to #1E1E28 range; even a medium gray background (#555) significantly reduces the reflective contrast
  • Provide fallbacks for background-clip: text -- while widely supported, use @supports to provide a solid silver color fallback for any browsers that do not support the text clipping technique
  • Use inset 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
  • Layer pseudo-elements for complexity -- use ::before for glossy highlight overlays and ::after for reflection effects or subtle metallic sheens; this avoids adding extra HTML elements while building visual depth
← Zurück zu den Designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. Alle Rechte vorbehalten.

Designs von chrislemke/website_designs, lizenziert unter MIT.