Hub

LIQUID
METAL

Chrome Aesthetics · Pure CSS

Premium chrome aesthetics forged from pure CSS. Multi-stop metallic gradients, animated light sweeps, and reflective surfaces — every element engineered to feel like polished alloy on a black void.

Technical Specifications
Base
#0C0C0C
Chrome
#C0C0C0
Highlight
#FFFFFF
Shadow
#6B6B6B
Typeface
Sora 800
Sweep Cycle
8s Loop
01
Chrome Gradient Text

Multi-stop vertical gradient mapped to text via background-clip. Animated background-position creates a living metallic sheen that shifts like light on brushed steel.

02
Light Sweep Animation

A diagonal band of translucent white glides across surfaces via ::before pseudo-elements. Simulates the caustic reflection of light moving across a polished chrome panel.

03
Metallic Surface System

Every panel uses angled gradients from charcoal to near-black. Top-edge highlight lines via ::after create the illusion of a beveled metal edge catching ambient light.

Chrome Reflection Gauge #000 — #FFF
Shadow Chrome-Lo Chrome Chrome-Hi Peak
Material Sample

AI Request Prompt

Design a landing page in Liquid Metal style — chrome reflections on pure black.

COLOR TOKENS:
--bg: #0c0c0c
--text: #f0f0f0
--chrome: #c0c0c0
--chrome-hi: #ffffff
--chrome-lo: #6b6b6b
--border: rgba(192, 192, 192, 0.15)
No other colors.

TYPOGRAPHY:
Heading: "Sora" sans-serif, 800 weight, tracking -0.04em, uppercase
Body: "Noto Sans" / "Sora" sans-serif, 400 / 500 weight
Scale: 14 / 16 / 17 / 35 / 83px (clamp(2.2rem, 6vw, 5.2rem))
Body line-height: 1.8
Heading line-height: 0.95
Title uses multi-stop gradient text: linear-gradient(180deg, #ffffff 0%, #e0e0e0 20%, #9e9e9e 45%, #c0c0c0 55%, #ffffff 70%, #a0a0a0 100%), background-size 100% 200%, background-clip text.

UI:
- Hero card: 1px solid var(--border), border-radius 28px, background linear-gradient(165deg, rgba(40,40,40,0.7) 0%, rgba(12,12,12,0.9) 100%), overflow hidden
- Tiles: 1px solid var(--border), border-radius 16px, background linear-gradient(145deg, rgba(60,60,60,0.3), rgba(20,20,20,0.6)), 1px top highlight line via ::after (linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent))
- Tile hover: border-color rgba(192, 192, 192, 0.35)
- Prompt section: background rgba(20, 20, 20, 0.9), border-radius 20px
- Buttons: border 1px solid var(--chrome-lo), border-radius 999px, background linear-gradient(145deg, rgba(60,60,60,0.3), rgba(30,30,30,0.5)), hover adds box-shadow 0 0 20px rgba(192,192,192,0.1)

LAYOUT:
- Container: min(1120px, 92vw) centered, padding 28px 0 80px
- Hero padding: clamp(24px, 5vw, 52px)
- Feature grid: repeat(auto-fit, minmax(200px, 1fr)), gap 12px
- Lead paragraph max-width: 700px

MOTION:
- Light sweep: hero::before pseudo-element, diagonal 105deg gradient band (transparent → rgba(255,255,255,0.08) → transparent), rotate(-15deg), animation translateX(-30%) to translateX(30%) over 8s ease-in-out infinite
- Chrome text shift: background-position 0% 0% to 0% 100%, 4s ease-in-out infinite alternate
- Tile entrance: translateY(14px) to 0, opacity 0 to 1, 0.7s ease, stagger 0.08s per tile
- Button hover: all 0.25s ease

RESPONSIVE:
- Below 768px: single column tiles, sweep animation disabled (animation: none), chrome title simplified to solid color, hero padding 24px
- Above 768px: auto-fit grid 2–4 columns, container 92vw

FORBIDDEN:
- No color accents — monochrome silver/charcoal only
- No flat matte surfaces — every panel must have subtle gradient or inset highlight
- No border-radius above 28px
- No text-shadow — chrome effect via gradient-clip only
- No images or external assets

OUTPUT:
1. Single HTML file with inline CSS
2. Chrome gradient text with animated background-position shift
3. Light sweep animation using ::before pseudo-element
4. Hero + feature tile grid with top-highlight lines
5. Color token custom properties in :root
6. Responsive layout using clamp() and auto-fit grid