Quartz 4

glass-chrome-ui-stijl

2 minuten leestijd

Design-referentie: Glass-chrome UI-elementen

Opgeslagen 2026-07-06 op verzoek van Thomas (“Vet! Sla deze maar op”). Bron: referentie-afbeelding gedeeld in chat — set UI-componenten (buttons, text field, select, switch, tabs, cards) in glazige chrome-stijl. Eerste toepassing: Huddle trial-landingspagina (huddle/trial-landingspagina/).

Beschrijving van de stijl

  • Ondergrond: licht, neutraal zilvergrijs (~#e9e8ec), zacht en mat — laat de elementen zweven.
  • Elementen: pill- en kaartvormen van donker “smoky glass” (bijna zwart met diepte), als fysieke glazen objecten.
  • Iriserende randen: kleur lekt aan de onderrand het glas in — cyaan/blauw, magenta/oranje, groen/geel, paars. Per element een eigen kleurpaar.
  • Glossy top-highlight: heldere witte specular reflectie over de bovenste ~35% van elk element.
  • Glazen rim: transparante frosted rand (4-6px) rondom de donkere kern.
  • Gekleurde schaduwen: de gloed van het element valt als gekleurd licht op de lichte ondergrond (geen grijze drop-shadows).
  • Typografie op elementen: clean witte sans, medium gewicht, ruim gezet.

Herbruikbaar CSS-recept

.glass-pill{
  --ga: rgba(77,225,255,.55);   /* iriserende kleur links */
  --gb: rgba(255,61,180,.5);    /* iriserende kleur rechts */
  --glow: rgba(90,140,255,.45); /* gekleurde schaduw op de ondergrond */
  position: relative;
  color: #fff;
  border-radius: 999px;
  background:
    linear-gradient(165deg, rgba(255,255,255,.22), rgba(255,255,255,.04) 38%),
    radial-gradient(140% 200% at 20% 130%, var(--ga), transparent 55%),
    radial-gradient(140% 200% at 80% 130%, var(--gb), transparent 55%),
    linear-gradient(180deg, #33323c 0%, #101017 60%, #17161f 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.25),
    0 0 0 5px rgba(255,255,255,.28),      /* frosted glazen rim */
    0 0 0 6px rgba(0,0,0,.08),
    inset 0 2px 3px rgba(255,255,255,.45),/* top gloss */
    inset 0 -10px 22px rgba(0,0,0,.5),    /* donkere onderbuik */
    0 26px 46px -14px var(--glow),        /* gekleurd licht op de grond */
    0 6px 14px rgba(20,20,35,.25);
}
/* kaart-variant: zelfde recept, border-radius: 22px */

Kleurenparen uit de referentie:

ElementLinksRechtsGlow
Primairdiep paars/zwartblauwkoel blauw
Secundairmagentaoranjeroze
Icon/veldcyaanblauwcyaan
Selectgroengeel/ambergroen
Switchblauwpaars/magentapaars

Toepassingsregels

  • Werkt het best op een lichte, rustige ondergrond — de pagina zelf blijft kalm, de elementen zijn het spektakel.
  • Interactieve elementen (knoppen, checkboxes, switches, inputs) krijgen de glass-behandeling; bodytekst blijft gewoon donker op licht.
  • Hover: subtiele lift + sheen-sweep (specular highlight die overheen glijdt).
  • Iriserende gradient ook bruikbaar voor progress bars en actieve staten.

Grafiekweergave

Backlinks