Digital / Web UI
Chrome UI
Bright bands, dark cuts और polished industrial feel वाली hard reflective metal UI surface.
Cr
Usage
- Hero headlines
- Primary buttons
- Premium frames
Parameters
- highlight bands
- contrast
- border
- reflection angle
- radius
AI Prompt
Sharp metallic gradients, black reflection cuts, thin white highlights और mirror-like edge वाली chrome surface बनाएं.
Tailwind notes
Images के बजाय layered linear gradients उपयोग करें. Tight borders और dark surrounding space रखें.
Performance notes
Static gradients हल्के होते हैं. Large chrome backgrounds को लगातार animate न करें.
CSS
.chrome-ui {
border: 1px solid rgba(255,255,255,.28);
border-radius: 16px;
background:
linear-gradient(115deg, #0b0d0f 0%, #f4f7f6 18%, #7d8588 27%, #fefefe 36%, #14171a 49%, #b8c1c4 64%, #ffffff 74%, #2b3033 100%);
color: #050607;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.7),
0 18px 50px rgba(0,0,0,.34);
}React example
export function ChromeButton({ children }) {
return <button className="chrome-ui">{children}</button>;
}