Back to Hub
Design Sample / Liquid Metal Go to Hub

LIQUID
METAL

Create a premium futuristic aesthetic by implementing chrome and metallic textures with CSS gradients. When requesting AI, include "chrome gradient text", "metallic sheen", "light sweep animation" for well-expressed liquid metal reflection effects.

Apply multi-step grayscale gradient to text
Add 1px highlight line at top of cards
Light reflection effect with sweep animation
Restrain colors to silver/charcoal range

AI Request Prompt

Design a liquid metal (chrome) aesthetic web landing page.

Style conditions:
- Background: Subtle light reflection gradient on pure black (#0c0c0c)
- Text: Chrome effect — multi-step grayscale linear-gradient + background-clip:text
- UI: 1px highlight at top of cards, subtle internal gradients
- Colors: Monochrome silver palette (#ffffff to #6b6b6b), rely on texture without color
- Motion: Diagonal light sweep animation, chrome text shift effect
- Layout: Generous whitespace, large titles, restrained element count

Responsive:
- Mobile (~768px): Single column, chrome text gradient simplified, sweep animation disabled
- Desktop: max-width 1000px, 2-column feature layout

Restrictions:
- No color accents — monochrome silver only
- No flat matte surfaces — every panel needs subtle gradient or inset highlight
- No border-radius above 20px — keep edges sharp and premium

Output:
1) Chrome text gradient CSS and color tokens
2) Light sweep animation implementation
3) Hero/Feature section HTML/CSS with responsive support