47 Tailwind CSS Toggles & Switches
28 / 47

All 47 in 47 Tailwind CSS Toggles & Switches

  1. 01Tailwind iOS-Style Toggle Switch with appearance-none
  2. 02Tailwind Dark Mode Sun / Moon Theme Switcher
  3. 03Tailwind Neumorphic Soft-UI Pill Toggle
  4. 04Tailwind Gooey Liquid Morphing Switch with SVG Filter
  5. 05Tailwind Bouncy Elastic Physics Toggle (Overshoot Cubic-Bezier)
  6. 06Tailwind ON / OFF Text Switch with Labels Inside the Track
  7. 07Tailwind SaaS Pricing Toggle — Monthly / Annually Segmented Pill
  8. 08Tailwind Mechanical Keycap Toggles with Haptic Feedback
  9. 09Tailwind Waveform Mute Toggle with Animated EQ Bars
  10. 10Tailwind Timed Auto-Off Toggle with Conic Countdown Ring
  11. 11Tailwind Press-and-Hold to Confirm Toggle (Fingerprint Scan)
  12. 12Tailwind Split-Flap Departure Board Toggle (3D Flip)
  13. 13Tailwind Permission Toggle Group with :has() Live Status Badge
  14. 14Tailwind Material Design 3 Switch with State Layer
  15. 15Tailwind Skeuomorphic Wall Light Switch with Room Relight
  16. 16Tailwind Neon Cyberpunk Toggle with Clipped Corners
  17. 17Tailwind Brutalist Snap Toggle with Hard Offset Shadow
  18. 18Tailwind Day / Night Landscape Scene Switch
  19. 19Tailwind 3D Flip Card Toggle (rotateY Switch)
  20. 20Tailwind Sliding Pill Toggle with Label Inside the Thumb
  21. 21Tailwind Glassmorphism Frosted Toggle with backdrop-blur
  22. 22Tailwind Rotary Knob Toggle with Brushed-Metal Conic Gradient
  23. 23Tailwind iOS Settings List with Grouped Toggle Rows
  24. 24Tailwind Minimal Outline Toggle Drawn in currentColor
  25. 25Tailwind Squash-and-Stretch Pebble Toggle
  26. 26Tailwind Industrial Rocker I/O Power Switch
  27. 27Tailwind Accessible role=switch Toggle with forced-colors Support
  28. 28Tailwind Macro-Pad Toggle Grid with RGB Underglow
  29. 29Tailwind Radial VU Meter Mute Toggle
  30. 30Tailwind Segmented Pip Countdown Auto-Off Toggle
  31. 31Tailwind Slide-to-Confirm Toggle Rail (Drag or Arrow Keys)
  32. 32Tailwind Odometer Roll ON / OFF Toggle
  33. 33Tailwind Master Toggle with Indeterminate Tri-State
  34. 34Tailwind iOS Control Centre Tile Toggles
  35. 35Tailwind Material 3 Connected Icon Toggle Buttons
  36. 36Tailwind Two-Gang Wall Plate with Cumulative Room Light
  37. 37Tailwind Neon Toggle with Animated Conic Border Light
  38. 38Tailwind Brutalist Rubber-Stamp Toggle
  39. 39Tailwind Aurora Night Sky Toggle Switch
  40. 40Tailwind 3D Rotating Cube Toggle
  41. 41Tailwind Three-Position Off / Auto / On Selector
  42. 42Tailwind Liquid Glass Toggle with Specular Highlight
  43. 43Tailwind Three-Detent Rotary Selector Knob
  44. 44Tailwind Hardware Slide Switch with Knurled Grip
  45. 45Tailwind Battery Saver Toggle with Live Fill Meter
  46. 46Tailwind Morphing Sun-to-Moon Icon Toggle (SVG Stroke)
  47. 47Tailwind Guarded Kill Switch Under a Flip-Up Safety Cover
Tailwind + JSMIT licensed

Tailwind Macro-Pad Toggle Grid with RGB Underglow

Demo 08's keycap idea taken to a six-key macro pad: a 3×2 grid of latching keys over an RGB underglow that blooms through the chassis gaps, each key showing its shortcut, and a live count of what is armed. Denser, louder, and it scans in one glance.

Live Demo
Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="ttg-28 w-full min-h-svh flex flex-col items-center justify-center gap-7 px-5 py-14 bg-ttg28-bg font-ttg28-mono" aria-label="Macro pad toggle grid">
  <div id="ttg-28-pad" class="relative grid grid-cols-3 gap-3.5 p-6 rounded-[26px] bg-linear-160 from-ttg28-boardhi to-ttg28-boardlo shadow-[0_30px_60px_-30px_oklch(0_0_0/0.95),inset_0_1px_0_oklch(1_0_0/0.08)]">
    <label class="relative block w-20 h-20 cursor-pointer" style="--glow:oklch(0.78 0.15 220)" data-action="mic">
      <span aria-hidden="true" class="ttg28-under pointer-events-none absolute inset-2 rounded-2xl bg-(--glow) blur-2xl opacity-0 transition-opacity duration-300"></span>
      <input type="checkbox" role="switch" checked aria-label="Microphone" class="peer appearance-none absolute inset-[-3px] z-10 rounded-xl cursor-pointer">
      <span class="absolute inset-0 z-[5] flex flex-col items-center justify-center gap-1 rounded-xl bg-linear-to-b from-ttg28-caphi to-ttg28-caplo text-ttg28-legend shadow-[0_7px_0_var(--color-ttg28-stem),0_12px_18px_-6px_oklch(0_0_0/0.8),inset_0_1px_0_oklch(1_0_0/0.1)] transition-[transform,box-shadow,color,text-shadow] duration-100 ease-out peer-active:translate-y-[5px] peer-checked:translate-y-[3px] peer-checked:text-(--glow) peer-checked:shadow-[0_4px_0_var(--color-ttg28-stem),0_8px_14px_-6px_oklch(0_0_0/0.8),0_0_22px_-2px_var(--glow)] peer-checked:[&~.ttg28-under]:opacity-70 peer-focus-visible:outline-3 peer-focus-visible:outline-ttg28-focus peer-focus-visible:outline-offset-4 motion-reduce:transition-[color,box-shadow]">
        <b class="text-[14px] font-bold tracking-[0.12em]">MIC</b>
        <i class="not-italic text-[9px] tracking-[0.16em] text-ttg28-hint">F13</i>
      </span>
    </label>
    <label class="relative block w-20 h-20 cursor-pointer" style="--glow:oklch(0.8 0.16 150)" data-action="cam">
      <span aria-hidden="true" class="ttg28-under pointer-events-none absolute inset-2 rounded-2xl bg-(--glow) blur-2xl opacity-0 transition-opacity duration-300"></span>
      <input type="checkbox" role="switch" aria-label="Camera" class="peer appearance-none absolute inset-[-3px] z-10 rounded-xl cursor-pointer">
      <span class="absolute inset-0 z-[5] flex flex-col items-center justify-center gap-1 rounded-xl bg-linear-to-b from-ttg28-caphi to-ttg28-caplo text-ttg28-legend shadow-[0_7px_0_var(--color-ttg28-stem),0_12px_18px_-6px_oklch(0_0_0/0.8),inset_0_1px_0_oklch(1_0_0/0.1)] transition-[transform,box-shadow,color,text-shadow] duration-100 ease-out peer-active:translate-y-[5px] peer-checked:translate-y-[3px] peer-checked:text-(--glow) peer-checked:shadow-[0_4px_0_var(--color-ttg28-stem),0_8px_14px_-6px_oklch(0_0_0/0.8),0_0_22px_-2px_var(--glow)] peer-checked:[&~.ttg28-under]:opacity-70 peer-focus-visible:outline-3 peer-focus-visible:outline-ttg28-focus peer-focus-visible:outline-offset-4 motion-reduce:transition-[color,box-shadow]">
        <b class="text-[14px] font-bold tracking-[0.12em]">CAM</b>
        <i class="not-italic text-[9px] tracking-[0.16em] text-ttg28-hint">F14</i>
      </span>
    </label>
    <label class="relative block w-20 h-20 cursor-pointer" style="--glow:oklch(0.72 0.19 22)" data-action="rec">
      <span aria-hidden="true" class="ttg28-under pointer-events-none absolute inset-2 rounded-2xl bg-(--glow) blur-2xl opacity-0 transition-opacity duration-300"></span>
      <input type="checkbox" role="switch" aria-label="Recording" class="peer appearance-none absolute inset-[-3px] z-10 rounded-xl cursor-pointer">
      <span class="absolute inset-0 z-[5] flex flex-col items-center justify-center gap-1 rounded-xl bg-linear-to-b from-ttg28-caphi to-ttg28-caplo text-ttg28-legend shadow-[0_7px_0_var(--color-ttg28-stem),0_12px_18px_-6px_oklch(0_0_0/0.8),inset_0_1px_0_oklch(1_0_0/0.1)] transition-[transform,box-shadow,color,text-shadow] duration-100 ease-out peer-active:translate-y-[5px] peer-checked:translate-y-[3px] peer-checked:text-(--glow) peer-checked:shadow-[0_4px_0_var(--color-ttg28-stem),0_8px_14px_-6px_oklch(0_0_0/0.8),0_0_22px_-2px_var(--glow)] peer-checked:[&~.ttg28-under]:opacity-70 peer-focus-visible:outline-3 peer-focus-visible:outline-ttg28-focus peer-focus-visible:outline-offset-4 motion-reduce:transition-[color,box-shadow]">
        <b class="text-[14px] font-bold tracking-[0.12em]">REC</b>
        <i class="not-italic text-[9px] tracking-[0.16em] text-ttg28-hint">F15</i>
      </span>
    </label>
    <label class="relative block w-20 h-20 cursor-pointer" style="--glow:oklch(0.82 0.15 95)" data-action="light">
      <span aria-hidden="true" class="ttg28-under pointer-events-none absolute inset-2 rounded-2xl bg-(--glow) blur-2xl opacity-0 transition-opacity duration-300"></span>
      <input type="checkbox" role="switch" checked aria-label="Key light" class="peer appearance-none absolute inset-[-3px] z-10 rounded-xl cursor-pointer">
      <span class="absolute inset-0 z-[5] flex flex-col items-center justify-center gap-1 rounded-xl bg-linear-to-b from-ttg28-caphi to-ttg28-caplo text-ttg28-legend shadow-[0_7px_0_var(--color-ttg28-stem),0_12px_18px_-6px_oklch(0_0_0/0.8),inset_0_1px_0_oklch(1_0_0/0.1)] transition-[transform,box-shadow,color,text-shadow] duration-100 ease-out peer-active:translate-y-[5px] peer-checked:translate-y-[3px] peer-checked:text-(--glow) peer-checked:shadow-[0_4px_0_var(--color-ttg28-stem),0_8px_14px_-6px_oklch(0_0_0/0.8),0_0_22px_-2px_var(--glow)] peer-checked:[&~.ttg28-under]:opacity-70 peer-focus-visible:outline-3 peer-focus-visible:outline-ttg28-focus peer-focus-visible:outline-offset-4 motion-reduce:transition-[color,box-shadow]">
        <b class="text-[14px] font-bold tracking-[0.12em]">LIGHT</b>
        <i class="not-italic text-[9px] tracking-[0.16em] text-ttg28-hint">F16</i>
      </span>
    </label>
    <label class="relative block w-20 h-20 cursor-pointer" style="--glow:oklch(0.76 0.16 300)" data-action="chat">
      <span aria-hidden="true" class="ttg28-under pointer-events-none absolute inset-2 rounded-2xl bg-(--glow) blur-2xl opacity-0 transition-opacity duration-300"></span>
      <input type="checkbox" role="switch" aria-label="Chat overlay" class="peer appearance-none absolute inset-[-3px] z-10 rounded-xl cursor-pointer">
      <span class="absolute inset-0 z-[5] flex flex-col items-center justify-center gap-1 rounded-xl bg-linear-to-b from-ttg28-caphi to-ttg28-caplo text-ttg28-legend shadow-[0_7px_0_var(--color-ttg28-stem),0_12px_18px_-6px_oklch(0_0_0/0.8),inset_0_1px_0_oklch(1_0_0/0.1)] transition-[transform,box-shadow,color,text-shadow] duration-100 ease-out peer-active:translate-y-[5px] peer-checked:translate-y-[3px] peer-checked:text-(--glow) peer-checked:shadow-[0_4px_0_var(--color-ttg28-stem),0_8px_14px_-6px_oklch(0_0_0/0.8),0_0_22px_-2px_var(--glow)] peer-checked:[&~.ttg28-under]:opacity-70 peer-focus-visible:outline-3 peer-focus-visible:outline-ttg28-focus peer-focus-visible:outline-offset-4 motion-reduce:transition-[color,box-shadow]">
        <b class="text-[14px] font-bold tracking-[0.12em]">CHAT</b>
        <i class="not-italic text-[9px] tracking-[0.16em] text-ttg28-hint">F17</i>
      </span>
    </label>
    <label class="relative block w-20 h-20 cursor-pointer" style="--glow:oklch(0.8 0.13 195)" data-action="mute">
      <span aria-hidden="true" class="ttg28-under pointer-events-none absolute inset-2 rounded-2xl bg-(--glow) blur-2xl opacity-0 transition-opacity duration-300"></span>
      <input type="checkbox" role="switch" aria-label="Alerts" class="peer appearance-none absolute inset-[-3px] z-10 rounded-xl cursor-pointer">
      <span class="absolute inset-0 z-[5] flex flex-col items-center justify-center gap-1 rounded-xl bg-linear-to-b from-ttg28-caphi to-ttg28-caplo text-ttg28-legend shadow-[0_7px_0_var(--color-ttg28-stem),0_12px_18px_-6px_oklch(0_0_0/0.8),inset_0_1px_0_oklch(1_0_0/0.1)] transition-[transform,box-shadow,color,text-shadow] duration-100 ease-out peer-active:translate-y-[5px] peer-checked:translate-y-[3px] peer-checked:text-(--glow) peer-checked:shadow-[0_4px_0_var(--color-ttg28-stem),0_8px_14px_-6px_oklch(0_0_0/0.8),0_0_22px_-2px_var(--glow)] peer-checked:[&~.ttg28-under]:opacity-70 peer-focus-visible:outline-3 peer-focus-visible:outline-ttg28-focus peer-focus-visible:outline-offset-4 motion-reduce:transition-[color,box-shadow]">
        <b class="text-[14px] font-bold tracking-[0.12em]">ALERT</b>
        <i class="not-italic text-[9px] tracking-[0.16em] text-ttg28-hint">F18</i>
      </span>
    </label>
  </div>
  <p id="ttg-28-count" aria-live="polite" class="font-ttg28-sans text-[11px] tracking-[0.14em] uppercase text-ttg28-mute">2 of 6 armed</p>
</section>
@import "tailwindcss";

@theme {
  --color-ttg28-bg: #111318;
  --color-ttg28-bg: oklch(0.18 0.006 265);
  --color-ttg28-boardhi: #272b33;
  --color-ttg28-boardhi: oklch(0.29 0.008 265);
  --color-ttg28-boardlo: #1a1d23;
  --color-ttg28-boardlo: oklch(0.23 0.007 265);
  --color-ttg28-caphi: #3e434c;
  --color-ttg28-caphi: oklch(0.38 0.01 265);
  --color-ttg28-caplo: #2c3038;
  --color-ttg28-caplo: oklch(0.3 0.009 265);
  --color-ttg28-stem: #15161a;
  --color-ttg28-stem: oklch(0.19 0.006 265);
  --color-ttg28-legend: #a0a7b3;
  --color-ttg28-legend: oklch(0.72 0.012 265);
  --color-ttg28-hint: #6d7480;
  --color-ttg28-hint: oklch(0.56 0.012 265);
  --color-ttg28-mute: #7d838f;
  --color-ttg28-mute: oklch(0.61 0.012 265);
  --color-ttg28-focus: #7db1ff;
  --color-ttg28-focus: oklch(0.76 0.13 250);
  --font-ttg28-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-ttg28-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.ttg-28 {
  width: 100%;
  min-height: 100svh;
}

.ttg-28 input[type="checkbox"] {
  -webkit-appearance: none;
}
/* The underglow disc precedes the input in source order, so no sibling variant can reach
   it from the cap. One scoped rule is cheaper than restructuring six keys. */

.ttg-28 label:has(input:checked) .ttg28-under {
  opacity: 0.7;
}
(() => {
  const pad = document.querySelector('#ttg-28-pad');
  const count = document.querySelector('#ttg-28-count');
  if (!pad || !count) return;
  const inputs = () => [...pad.querySelectorAll('input[type="checkbox"]')];
  pad.addEventListener('change', () => {
    navigator.vibrate?.(8);
    const on = inputs().filter((i) => i.checked).length;
    count.textContent = on + ' of ' + inputs().length + ' armed';
  });
})();

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-ttg28-bg: #111318;
  --color-ttg28-bg: oklch(0.18 0.006 265);
  --color-ttg28-boardhi: #272b33;
  --color-ttg28-boardhi: oklch(0.29 0.008 265);
  --color-ttg28-boardlo: #1a1d23;
  --color-ttg28-boardlo: oklch(0.23 0.007 265);
  --color-ttg28-caphi: #3e434c;
  --color-ttg28-caphi: oklch(0.38 0.01 265);
  --color-ttg28-caplo: #2c3038;
  --color-ttg28-caplo: oklch(0.3 0.009 265);
  --color-ttg28-stem: #15161a;
  --color-ttg28-stem: oklch(0.19 0.006 265);
  --color-ttg28-legend: #a0a7b3;
  --color-ttg28-legend: oklch(0.72 0.012 265);
  --color-ttg28-hint: #6d7480;
  --color-ttg28-hint: oklch(0.56 0.012 265);
  --color-ttg28-mute: #7d838f;
  --color-ttg28-mute: oklch(0.61 0.012 265);
  --color-ttg28-focus: #7db1ff;
  --color-ttg28-focus: oklch(0.76 0.13 250);
  --font-ttg28-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-ttg28-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.ttg-28 {
  width: 100%;
  min-height: 100svh;
}

.ttg-28 input[type="checkbox"] {
  -webkit-appearance: none;
}
/* The underglow disc precedes the input in source order, so no sibling variant can reach
   it from the cap. One scoped rule is cheaper than restructuring six keys. */

.ttg-28 label:has(input:checked) .ttg28-under {
  opacity: 0.7;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • The underglow is the whole reason this is a different demo rather than demo 08 with more keys: light that escapes BETWEEN the caps is something a single switch cannot express, and it is four utilities per key.
  • One scoped CSS rule survived: the glow disc sits before the input in source order, so no sibling variant reaches it. Reordering six keys to satisfy a variant would be the tail wagging the dog.
  • peer-checked:[&~.ttg28-under] is left in the class list as the documented intent even though the scoped rule is what fires — a reader should see the relationship where it lives.
  • UI upgrade over demo 08: a second line per key carries the shortcut, the legend ink rose to oklch(0.72) (5.4:1 unlit), and an aria-live count means the pad's overall state is available as text, not only as light.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Macro-Pad Toggle Grid with RGB Underglow
Source: https://codefronts.com/components/tailwind-css-toggles-switches/tailwind-macro-pad-toggle-grid-rgb-underglow/

Demo 08's keycap idea taken to a six-key macro pad: a 3&times;2 grid of latching keys over an RGB underglow that blooms through the chassis gaps, each key showing its shortcut, and a live count of what is armed. Denser, louder, and it scans in one glance.
## HTML
```html
<section class="ttg-28 w-full min-h-svh flex flex-col items-center justify-center gap-7 px-5 py-14 bg-ttg28-bg font-ttg28-mono" aria-label="Macro pad toggle grid">
  <div id="ttg-28-pad" class="relative grid grid-cols-3 gap-3.5 p-6 rounded-[26px] bg-linear-160 from-ttg28-boardhi to-ttg28-boardlo shadow-[0_30px_60px_-30px_oklch(0_0_0/0.95),inset_0_1px_0_oklch(1_0_0/0.08)]">
    <label class="relative block w-20 h-20 cursor-pointer" style="--glow:oklch(0.78 0.15 220)" data-action="mic">
      <span aria-hidden="true" class="ttg28-under pointer-events-none absolute inset-2 rounded-2xl bg-(--glow) blur-2xl opacity-0 transition-opacity duration-300"></span>
      <input type="checkbox" role="switch" checked aria-label="Microphone" class="peer appearance-none absolute inset-[-3px] z-10 rounded-xl cursor-pointer">
      <span class="absolute inset-0 z-[5] flex flex-col items-center justify-center gap-1 rounded-xl bg-linear-to-b from-ttg28-caphi to-ttg28-caplo text-ttg28-legend shadow-[0_7px_0_var(--color-ttg28-stem),0_12px_18px_-6px_oklch(0_0_0/0.8),inset_0_1px_0_oklch(1_0_0/0.1)] transition-[transform,box-shadow,color,text-shadow] duration-100 ease-out peer-active:translate-y-[5px] peer-checked:translate-y-[3px] peer-checked:text-(--glow) peer-checked:shadow-[0_4px_0_var(--color-ttg28-stem),0_8px_14px_-6px_oklch(0_0_0/0.8),0_0_22px_-2px_var(--glow)] peer-checked:[&~.ttg28-under]:opacity-70 peer-focus-visible:outline-3 peer-focus-visible:outline-ttg28-focus peer-focus-visible:outline-offset-4 motion-reduce:transition-[color,box-shadow]">
        <b class="text-[14px] font-bold tracking-[0.12em]">MIC</b>
        <i class="not-italic text-[9px] tracking-[0.16em] text-ttg28-hint">F13</i>
      </span>
    </label>
    <label class="relative block w-20 h-20 cursor-pointer" style="--glow:oklch(0.8 0.16 150)" data-action="cam">
      <span aria-hidden="true" class="ttg28-under pointer-events-none absolute inset-2 rounded-2xl bg-(--glow) blur-2xl opacity-0 transition-opacity duration-300"></span>
      <input type="checkbox" role="switch" aria-label="Camera" class="peer appearance-none absolute inset-[-3px] z-10 rounded-xl cursor-pointer">
      <span class="absolute inset-0 z-[5] flex flex-col items-center justify-center gap-1 rounded-xl bg-linear-to-b from-ttg28-caphi to-ttg28-caplo text-ttg28-legend shadow-[0_7px_0_var(--color-ttg28-stem),0_12px_18px_-6px_oklch(0_0_0/0.8),inset_0_1px_0_oklch(1_0_0/0.1)] transition-[transform,box-shadow,color,text-shadow] duration-100 ease-out peer-active:translate-y-[5px] peer-checked:translate-y-[3px] peer-checked:text-(--glow) peer-checked:shadow-[0_4px_0_var(--color-ttg28-stem),0_8px_14px_-6px_oklch(0_0_0/0.8),0_0_22px_-2px_var(--glow)] peer-checked:[&~.ttg28-under]:opacity-70 peer-focus-visible:outline-3 peer-focus-visible:outline-ttg28-focus peer-focus-visible:outline-offset-4 motion-reduce:transition-[color,box-shadow]">
        <b class="text-[14px] font-bold tracking-[0.12em]">CAM</b>
        <i class="not-italic text-[9px] tracking-[0.16em] text-ttg28-hint">F14</i>
      </span>
    </label>
    <label class="relative block w-20 h-20 cursor-pointer" style="--glow:oklch(0.72 0.19 22)" data-action="rec">
      <span aria-hidden="true" class="ttg28-under pointer-events-none absolute inset-2 rounded-2xl bg-(--glow) blur-2xl opacity-0 transition-opacity duration-300"></span>
      <input type="checkbox" role="switch" aria-label="Recording" class="peer appearance-none absolute inset-[-3px] z-10 rounded-xl cursor-pointer">
      <span class="absolute inset-0 z-[5] flex flex-col items-center justify-center gap-1 rounded-xl bg-linear-to-b from-ttg28-caphi to-ttg28-caplo text-ttg28-legend shadow-[0_7px_0_var(--color-ttg28-stem),0_12px_18px_-6px_oklch(0_0_0/0.8),inset_0_1px_0_oklch(1_0_0/0.1)] transition-[transform,box-shadow,color,text-shadow] duration-100 ease-out peer-active:translate-y-[5px] peer-checked:translate-y-[3px] peer-checked:text-(--glow) peer-checked:shadow-[0_4px_0_var(--color-ttg28-stem),0_8px_14px_-6px_oklch(0_0_0/0.8),0_0_22px_-2px_var(--glow)] peer-checked:[&~.ttg28-under]:opacity-70 peer-focus-visible:outline-3 peer-focus-visible:outline-ttg28-focus peer-focus-visible:outline-offset-4 motion-reduce:transition-[color,box-shadow]">
        <b class="text-[14px] font-bold tracking-[0.12em]">REC</b>
        <i class="not-italic text-[9px] tracking-[0.16em] text-ttg28-hint">F15</i>
      </span>
    </label>
    <label class="relative block w-20 h-20 cursor-pointer" style="--glow:oklch(0.82 0.15 95)" data-action="light">
      <span aria-hidden="true" class="ttg28-under pointer-events-none absolute inset-2 rounded-2xl bg-(--glow) blur-2xl opacity-0 transition-opacity duration-300"></span>
      <input type="checkbox" role="switch" checked aria-label="Key light" class="peer appearance-none absolute inset-[-3px] z-10 rounded-xl cursor-pointer">
      <span class="absolute inset-0 z-[5] flex flex-col items-center justify-center gap-1 rounded-xl bg-linear-to-b from-ttg28-caphi to-ttg28-caplo text-ttg28-legend shadow-[0_7px_0_var(--color-ttg28-stem),0_12px_18px_-6px_oklch(0_0_0/0.8),inset_0_1px_0_oklch(1_0_0/0.1)] transition-[transform,box-shadow,color,text-shadow] duration-100 ease-out peer-active:translate-y-[5px] peer-checked:translate-y-[3px] peer-checked:text-(--glow) peer-checked:shadow-[0_4px_0_var(--color-ttg28-stem),0_8px_14px_-6px_oklch(0_0_0/0.8),0_0_22px_-2px_var(--glow)] peer-checked:[&~.ttg28-under]:opacity-70 peer-focus-visible:outline-3 peer-focus-visible:outline-ttg28-focus peer-focus-visible:outline-offset-4 motion-reduce:transition-[color,box-shadow]">
        <b class="text-[14px] font-bold tracking-[0.12em]">LIGHT</b>
        <i class="not-italic text-[9px] tracking-[0.16em] text-ttg28-hint">F16</i>
      </span>
    </label>
    <label class="relative block w-20 h-20 cursor-pointer" style="--glow:oklch(0.76 0.16 300)" data-action="chat">
      <span aria-hidden="true" class="ttg28-under pointer-events-none absolute inset-2 rounded-2xl bg-(--glow) blur-2xl opacity-0 transition-opacity duration-300"></span>
      <input type="checkbox" role="switch" aria-label="Chat overlay" class="peer appearance-none absolute inset-[-3px] z-10 rounded-xl cursor-pointer">
      <span class="absolute inset-0 z-[5] flex flex-col items-center justify-center gap-1 rounded-xl bg-linear-to-b from-ttg28-caphi to-ttg28-caplo text-ttg28-legend shadow-[0_7px_0_var(--color-ttg28-stem),0_12px_18px_-6px_oklch(0_0_0/0.8),inset_0_1px_0_oklch(1_0_0/0.1)] transition-[transform,box-shadow,color,text-shadow] duration-100 ease-out peer-active:translate-y-[5px] peer-checked:translate-y-[3px] peer-checked:text-(--glow) peer-checked:shadow-[0_4px_0_var(--color-ttg28-stem),0_8px_14px_-6px_oklch(0_0_0/0.8),0_0_22px_-2px_var(--glow)] peer-checked:[&~.ttg28-under]:opacity-70 peer-focus-visible:outline-3 peer-focus-visible:outline-ttg28-focus peer-focus-visible:outline-offset-4 motion-reduce:transition-[color,box-shadow]">
        <b class="text-[14px] font-bold tracking-[0.12em]">CHAT</b>
        <i class="not-italic text-[9px] tracking-[0.16em] text-ttg28-hint">F17</i>
      </span>
    </label>
    <label class="relative block w-20 h-20 cursor-pointer" style="--glow:oklch(0.8 0.13 195)" data-action="mute">
      <span aria-hidden="true" class="ttg28-under pointer-events-none absolute inset-2 rounded-2xl bg-(--glow) blur-2xl opacity-0 transition-opacity duration-300"></span>
      <input type="checkbox" role="switch" aria-label="Alerts" class="peer appearance-none absolute inset-[-3px] z-10 rounded-xl cursor-pointer">
      <span class="absolute inset-0 z-[5] flex flex-col items-center justify-center gap-1 rounded-xl bg-linear-to-b from-ttg28-caphi to-ttg28-caplo text-ttg28-legend shadow-[0_7px_0_var(--color-ttg28-stem),0_12px_18px_-6px_oklch(0_0_0/0.8),inset_0_1px_0_oklch(1_0_0/0.1)] transition-[transform,box-shadow,color,text-shadow] duration-100 ease-out peer-active:translate-y-[5px] peer-checked:translate-y-[3px] peer-checked:text-(--glow) peer-checked:shadow-[0_4px_0_var(--color-ttg28-stem),0_8px_14px_-6px_oklch(0_0_0/0.8),0_0_22px_-2px_var(--glow)] peer-checked:[&~.ttg28-under]:opacity-70 peer-focus-visible:outline-3 peer-focus-visible:outline-ttg28-focus peer-focus-visible:outline-offset-4 motion-reduce:transition-[color,box-shadow]">
        <b class="text-[14px] font-bold tracking-[0.12em]">ALERT</b>
        <i class="not-italic text-[9px] tracking-[0.16em] text-ttg28-hint">F18</i>
      </span>
    </label>
  </div>
  <p id="ttg-28-count" aria-live="polite" class="font-ttg28-sans text-[11px] tracking-[0.14em] uppercase text-ttg28-mute">2 of 6 armed</p>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-ttg28-bg: #111318;
  --color-ttg28-bg: oklch(0.18 0.006 265);
  --color-ttg28-boardhi: #272b33;
  --color-ttg28-boardhi: oklch(0.29 0.008 265);
  --color-ttg28-boardlo: #1a1d23;
  --color-ttg28-boardlo: oklch(0.23 0.007 265);
  --color-ttg28-caphi: #3e434c;
  --color-ttg28-caphi: oklch(0.38 0.01 265);
  --color-ttg28-caplo: #2c3038;
  --color-ttg28-caplo: oklch(0.3 0.009 265);
  --color-ttg28-stem: #15161a;
  --color-ttg28-stem: oklch(0.19 0.006 265);
  --color-ttg28-legend: #a0a7b3;
  --color-ttg28-legend: oklch(0.72 0.012 265);
  --color-ttg28-hint: #6d7480;
  --color-ttg28-hint: oklch(0.56 0.012 265);
  --color-ttg28-mute: #7d838f;
  --color-ttg28-mute: oklch(0.61 0.012 265);
  --color-ttg28-focus: #7db1ff;
  --color-ttg28-focus: oklch(0.76 0.13 250);
  --font-ttg28-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-ttg28-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.ttg-28 {
  width: 100%;
  min-height: 100svh;
}

.ttg-28 input[type="checkbox"] {
  -webkit-appearance: none;
}
/* The underglow disc precedes the input in source order, so no sibling variant can reach
   it from the cap. One scoped rule is cheaper than restructuring six keys. */

.ttg-28 label:has(input:checked) .ttg28-under {
  opacity: 0.7;
}
```

## JavaScript
```js
(() => {
  const pad = document.querySelector('#ttg-28-pad');
  const count = document.querySelector('#ttg-28-count');
  if (!pad || !count) return;
  const inputs = () => [...pad.querySelectorAll('input[type="checkbox"]')];
  pad.addEventListener('change', () => {
    navigator.vibrate?.(8);
    const on = inputs().filter((i) => i.checked).length;
    count.textContent = on + ' of ' + inputs().length + ' armed';
  });
})();
```

How this works

The underglow is the upgrade. Each key owns a blurred, saturated disc positioned behind the chassis; checking the key fades it in. Because the discs sit under a translucent-edged board, the light reads as escaping from beneath the caps rather than being painted on them — the thing a real macro pad does that a single key cannot show.

Three positions still, now at grid scale. Resting, latched (lower, lit legend, underglow on) and pressed. With six keys the latched height difference does more work than colour: an armed row is visibly recessed.

JavaScript counts and taps. One delegated listener updates an armed-count readout and fires an 8ms haptic tick. Delete it and the pad still works; you just lose the count.

Make it yours

  • Per-key colour is one inline --glow; the cap tint, legend, halo and underglow all read it.
  • Resize to a 4×3 pad by changing grid-cols-3 and adding keys — nothing else changes.
  • Swap legends for two-line labels (action over shortcut) if your keys need naming.
  • Wire real actions: read data-action in the same change listener.

Gotchas — read before shipping

  • The underglow discs must not intercept clicks — pointer-events-none on every one.
  • A 24px blur on six discs is the expensive part of this demo; keep them small and do not animate the blur radius.
  • navigator.vibrate?.() only: Android-only in practice, and never gate state on it.
  • With six keys, colour alone stops being a state signal — the recessed position and the count readout are what make it scannable.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Grid, filters and shadows are universal; :has() (Firefox 121+) drives the status strip and the Vibration API is a progressive enhancement.

Techniques used in this demo

Utilitiesfirst-class utility or variant

box-shadowtw ↗color-mix()tw ↗blur filtertw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →