VmVibe Materials
EN中文ESHIAR
Back to map
Digital / Web UI

Chrome UI

A hard reflective metal UI surface with bright bands, dark cuts, and a polished industrial feel.

Status: ReadyCr
Cr

Usage

  • Hero headlines
  • Primary buttons
  • Premium frames

Adjustable parameters

  • highlight bands
  • contrast
  • border
  • reflection angle
  • radius

AI Prompt

Create a chrome interface surface with sharp metallic gradients, black reflection cuts, thin white highlights, and a polished mirror-like edge.

Tailwind notes

Use layered linear gradients instead of images. Pair with tight borders and dark surrounding space.

Performance notes

Static gradients are cheap. Avoid animating large chrome backgrounds continuously.

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