Gradients, glass & soft UI (2018–2023) · Web Design Through the Ages

New · Artist Wallet 2.0

Stream lossless, tip artists in one tap, and watch every cent you spend land in their wallet. Music and money, finally in sync.

Start free trial Try the studio

Low Orbit Lullaby

Mira Sol · Satellite Hearts

Every play sends €0.012 straight to Mira.

Your artist wallet

€12.40

sent to 23 artists this month

Top supported

Mira Sol €3.10
Tidepool €2.45
Kasa Nine €1.90

Driftwave Card

1% of every purchase tips the artist you're listening to.

Studio mixer

Soft UI: controls extruded from the surface, lit from the top left.

Monitor

Spatial audio Loudness

Volume 64

Curator's notes · 2018–2023

Gradients, glass & soft UI

After years of flat colour, gradients came back as glowing blobs behind frosted-glass panels, soft extruded "neumorphic" controls had a moment on Dribbble, and every app grew a dark mode.

The world at the time

Screens: High-density OLED phones and Retina laptops; system-wide dark mode from 2019
Connection: Fast 4G and fibre; 5G arriving
Browsers & clients: Safari had backdrop-filter first; Chrome shipped it in 2019, Firefox in 2022

Signature traits

Hover or focus a trait to find it in the page.

Built with

backdrop-filter: blur() saturate() for glass, with a thin light border to catch the edge
Large radial-gradient() shapes under filter: blur() for mesh-style colour
Two box-shadows, one light and one dark, for soft UI; inset to "press" it
prefers-color-scheme and color-scheme for dark mode
Variable system fonts (SF Pro, Segoe UI Variable) for smooth weight changes

View the code

Soft UI: a light shadow and a dark one era.css

.dw__neu {
  border-radius: 24px;
  background: var(--soft);
  box-shadow:
    9px 9px 18px var(--soft-lo),
    -9px -9px 18px var(--soft-hi);
}
.dw__neu-btn {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 0;
  border-radius: 50%;
  background: var(--soft);
  color: var(--soft-ink);
  box-shadow: 6px 6px 12px var(--soft-lo), -6px -6px 12px var(--soft-hi);
  cursor: pointer;
  transition: box-shadow 200ms ease, color 200ms;
}
/* Pressed: the light flips inside, as if the button sank into the surface. */
.dw__neu-btn[aria-pressed='true'] {
  color: var(--accent);
  box-shadow: inset 6px 6px 12px var(--soft-lo), inset -6px -6px 12px var(--soft-hi);
}

A glass card is mostly a blur demo.html

<article class="dw__player glass" data-trait="glass" aria-label="Now playing">
  <div class="dw__art" data-trait="illustration">
    <svg viewBox="0 0 200 200" role="img" aria-labelledby="dw-art-t">
      <title id="dw-art-t">Album art: a glossy 3D sphere inside a floating ring</title>
      <defs>
        <radialGradient id="dw-sph" cx="35%" cy="30%" r="75%"><stop offset="0" stop-color="#fff"/><stop offset=".25" stop-color="#ffb3d9"/><stop offset=".7" stop-color="#7b5cff"/><stop offset="1" stop-color="#2a1a7a"/></radialGradient>
        <linearGradient id="dw-ring" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#5ef2ff"/><stop offset=".5" stop-color="#ffffff"/><stop offset="1" stop-color="#ff7ab6"/></linearGradient>
        <linearGradient id="dw-bg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#ffd6a5"/><stop offset="1" stop-color="#ff7ab6"/></linearGradient>
        <radialGradient id="dw-shadow"><stop offset="0" stop-color="#2a1a7a" stop-opacity=".45"/><stop offset="1" stop-color="#2a1a7a" stop-opacity="0"/></radialGradient>
      </defs>
      <rect width="200" height="200" rx="24" fill="url(#dw-bg)"/>
      <ellipse cx="100" cy="168" rx="56" ry="10" fill="url(#dw-shadow)"/>
      <path d="M28 104a72 22 -12 0 0 144 -30" fill="none" stroke="url(#dw-ring)" stroke-width="9" stroke-linecap="round" opacity=".55"/>
      <circle cx="100" cy="96" r="50" fill="url(#dw-sph)"/>
      <ellipse cx="82" cy="74" rx="16" ry="9" fill="#fff" opacity=".55" transform="rotate(-30 82 74)"/>
      <path d="M172 74a72 22 -12 0 1 -144 30" fill="none" stroke="url(#dw-ring)" stroke-width="9" stroke-linecap="round"/>
      <circle cx="156" cy="44" r="10" fill="#5ef2ff"/><circle cx="153" cy="41" r="3" fill="#fff" opacity=".8"/>
    </svg>
  </div>
  <div class="dw__track">
    <h2>Low Orbit Lullaby</h2>
    <p>Mira Sol · <span>Satellite Hearts</span></p>
  </div>
  <div class="dw__progress" role="img" aria-label="1 minute 12 seconds of 3 minutes 48 seconds"><span></span></div>
  <div class="dw__times" aria-hidden="true"><span>1:12</span><span>3:48</span></div>
  <div class="dw__controls">
    <button class="dw__ctl" type="button" aria-label="Previous track"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6h2v12H6zm3.5 6 8.5 6V6z"/></svg></button>
    <button class="dw__ctl dw__ctl--play" type="button" aria-pressed="false" aria-label="Play"><svg viewBox="0 0 24 24" aria-hidden="true"><path class="dw__ico-play" d="M8 5v14l11-7z"/><path class="dw__ico-pause" d="M6 5h4v14H6zm8 0h4v14h-4z"/></svg></button>
    <button class="dw__ctl" type="button" aria-label="Next track"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg></button>
  </div>
  <p class="dw__tip">Every play sends <strong>€0.012</strong> straight to Mira.</p>
</article>

Theme tokens for light and dark era.css

.dw {
  --bg: #f3eefe;
  --ink: #1d1640;
  --muted: #4b4470;
  --glass: rgb(255 255 255 / 0.32);
  --glass-edge: rgb(255 255 255 / 0.65);
  --glass-shadow: 0 8px 32px rgb(60 30 140 / 0.18);
  --soft: #e7e8f0;
  --soft-hi: #ffffff;
  --soft-lo: #c3c5d4;
  --soft-ink: #3a3b55;
  --accent: #6a5cff;
  --blob-a: #ff7ab6;
  --blob-b: #6a5cff;
  --blob-c: #5ef2ff;
  --blob-d: #ffc46b;
  color-scheme: light;
}
.dw[data-theme='dark'] {
  --bg: #0f0b24;
  --ink: #f4f1ff;
  --muted: #c9c3ec;
  --glass: rgb(30 22 70 / 0.38);
  --glass-edge: rgb(255 255 255 / 0.16);
  --glass-shadow: 0 8px 32px rgb(0 0 0 / 0.45);
  --soft: #262838;
  --soft-hi: #31344a;
  --soft-lo: #17182a;
  --soft-ink: #dcdcf2;
  --accent: #9d93ff;
  --blob-a: #d6338a;
  --blob-b: #4b3bff;
  --blob-c: #0fb6c9;
  --blob-d: #b04cff;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  .dw:not([data-theme='light']) {
    --bg: #0f0b24;
    --ink: #f4f1ff;
    --muted: #c9c3ec;
    --glass: rgb(30 22 70 / 0.38);
    --glass-edge: rgb(255 255 255 / 0.16);
    --glass-shadow: 0 8px 32px rgb(0 0 0 / 0.45);
    --soft: #262838;
    --soft-hi: #31344a;
    --soft-lo: #17182a;
    --soft-ink: #dcdcf2;
    --accent: #9d93ff;
    --blob-a: #d6338a;
    --blob-b: #4b3bff;
    --blob-c: #0fb6c9;
    --blob-d: #b04cff;
    color-scheme: dark;
  }
}

Follow the OS until the visitor decides era.client.ts

/** The OS decides until the visitor flips the switch; their choice is remembered. */
let saved: string | null = null
try {
  saved = localStorage.getItem('era16-theme')
} catch {
  /* storage blocked */
}
const apply = (theme: 'light' | 'dark') => {
  room.dataset.theme = theme
  themeBtn.setAttribute('aria-checked', String(theme === 'dark'))
}
apply(saved === 'dark' || saved === 'light' ? saved : mq.matches ? 'dark' : 'light')
const onScheme = () => {
  if (!saved) apply(mq.matches ? 'dark' : 'light')
}
mq.addEventListener('change', onScheme)
themeBtn.addEventListener('click', () => {
  const next = room.dataset.theme === 'dark' ? 'light' : 'dark'
  apply(next)
  saved = next
  try {
    localStorage.setItem('era16-theme', next)
  } catch {
    /* ignore */
  }
})

Then vs now

Glass became an OS material and dark mode a default expectation; pure neumorphism faded because its low-contrast controls were hard to see.

Recreated with modern tech

The weight animation is smooth only where the system UI font is a variable font; elsewhere it steps between the weights available.

Feel every frequency.

Low Orbit Lullaby

Your artist wallet

Top supported

Driftwave Card

Studio mixer