v138 · css

Equalizer Bars

An audio equalizer where each bar's height is calc(abs(var(--v)) * 2px) and its hue shifts with sign(var(--v)) — teal for positive, rose for negative. No JavaScript conditionals, no if/else, no class toggling. abs() and sign() do the visual branching in pure CSS math.

Feature detection: checking…
Preset:
CSS abs() + sign() equalizer static

abs() — bar height

height: calc(abs(var(--v)) * 2px)
Maps any signed value (−100 to +100) to a positive bar height. Without abs() a negative value would give height: -Xpx which is clamped to 0 — you'd lose the negative signal entirely. With abs() both +60 and −60 produce 120px bars.

sign() — bar colour

oklch(… calc(150deg + sign(var(--v)) * 100deg))
sign() returns −1, 0, or +1. Multiplied by 100° it shifts the hue: positive (sign=+1) → 250° (blue-teal), negative (sign=−1) → 50° (amber-rose). No if(), no JS class toggle — a single multiply branches the colour.

/* The two key expressions — no JavaScript needed */

.eq-bar {
  /* abs() maps -100..+100 to a non-negative height */
  height: calc(abs(var(--v)) * 2px);

  /* sign() shifts hue: +1 → teal, -1 → amber, 0 → neutral */
  background: oklch(
    0.65
    calc(0.15 + abs(var(--v)) / 100 * 0.1)
    calc(150deg + sign(var(--v)) * 100deg)
  );
}

/*
  JS only sets one CSS custom property per bar:
  el.style.setProperty('--v', value);  // e.g. -68

  All visual output — height, colour — flows from CSS math.
*/

see also