Chrome button

Polished-metal CTA — gradient + multi-layer shadow stack gives it a tactile chrome finish.

CTAs Captured JS-free

Use when — retro/automotive/diner brand voice. The chrome gradient instantly reads "50s American" or "vintage industrial." Don't use for SaaS or clinical brands — feels off-tone.

Live demo

The four-stop gradient

background: linear-gradient(180deg,
  var(--chrome-1) 0%,    /* near-white top */
  #ECEEF0 48%,          /* light gray mid-stop */
  var(--chrome-2) 56%,  /* darker silver after midline */
  var(--chrome-3) 100%  /* deep silver bottom */
);

The 48% → 56% jump (only 8 percentage points apart) creates a sharp horizontal "reflection line" near the middle — exactly how real polished metal looks. Without that jump, the gradient feels like vinyl.

The four-shadow stack

box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.95),   /* top inner highlight */
  inset 0 -1px 3px rgba(0,0,0,0.12),      /* bottom inner shadow */
  0 2px 4px rgba(0,0,0,0.08),             /* close drop */
  0 8px 22px rgba(0,0,0,0.16);            /* ambient drop */

Two inset shadows + two outer shadows. Inset top = edge light. Inset bottom = inner darkness, makes the button feel concave-edged. Outer shadows give it lift.

Variants worth considering

Brass / gold — swap the chrome stops for #fff7d4 → #f0d68c → #b89548 → #8a6e2a. Same gradient logic, different metal.

Dark chrome — invert: dark grays with cyan/blue highlights. Reads as "premium audio gear" / Bose / Bang & Olufsen.

Pressed state — on :active, swap the inset directions and reduce the outer drop. Tactile feedback.

Source: Chevy 55 landing page header CTA (user-uploaded HTML, 2026-05-18).