42 / 47

All 47 in 47 Tailwind CSS Toggles & Switches

Pure TailwindMIT licensed

Tailwind Liquid Glass Toggle with Specular Highlight

Glass with a lens in it: the thumb brightens and saturates what sits behind it, carries a moving specular sweep across its crown, and drags a soft caustic shadow along the track. Demo 21 frosts a pane; this one bends light.

Live DemoSep 23, 2026

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-42 relative overflow-hidden w-full min-h-svh grid place-items-center px-5 py-14 bg-linear-140 from-ttg42-scenehi via-ttg42-scenemid to-ttg42-scenelo font-ttg42-sans" aria-label="Liquid glass toggle">
  <span aria-hidden="true" class="pointer-events-none absolute -top-16 left-[12%] w-96 h-96 rounded-full blur-[70px] opacity-80 bg-radial from-ttg42-bloba to-transparent to-70%"></span>
  <span aria-hidden="true" class="pointer-events-none absolute -bottom-20 right-[8%] w-96 h-96 rounded-full blur-[70px] opacity-80 bg-radial from-ttg42-blobb to-transparent to-70%"></span>
  <label for="ttg-42-sw" class="relative z-10 flex items-center gap-9 px-7 py-5 rounded-[24px] cursor-pointer bg-white/10 border border-white/25 backdrop-blur-xl shadow-[inset_0_1px_0_oklch(1_0_0/0.4),0_28px_56px_-28px_oklch(0_0_0/0.75)]">
    <span class="flex flex-col gap-0.5">
      <b class="text-[15.5px] font-semibold text-white">Lens blur</b>
      <small class="text-[12.5px] text-white/75">Refract the wallpaper behind panels</small>
    </span>
    <span class="relative shrink-0 w-[84px] h-11 rounded-full bg-white/12 border border-white/25 shadow-[inset_0_2px_6px_oklch(0_0_0/0.25)] transition-colors duration-[400ms] has-checked:bg-ttg42-tint/25">
      <span aria-hidden="true" class="ttg42-caustic pointer-events-none absolute top-2 left-2 w-8 h-8 rounded-full blur-lg bg-ttg42-caustic transition-transform duration-[400ms] ease-[cubic-bezier(0.3,1,0.35,1.05)] motion-reduce:transition-none"></span>
      <input type="checkbox" id="ttg-42-sw" role="switch" checked class="peer appearance-none absolute inset-0 w-full h-full rounded-full bg-transparent cursor-pointer z-20 focus-visible:outline-3 focus-visible:outline-white focus-visible:outline-offset-4">
      <span aria-hidden="true" class="ttg42-lens pointer-events-none absolute top-1 left-1 z-10 grid place-items-center w-9 h-9 rounded-full overflow-hidden bg-white/25 backdrop-blur-md backdrop-brightness-125 backdrop-saturate-150 shadow-[inset_0_1px_0_oklch(1_0_0/0.65),inset_0_-2px_6px_oklch(0_0_0/0.25),0_4px_12px_-2px_oklch(0_0_0/0.45)] transition-transform duration-[400ms] ease-[cubic-bezier(0.3,1,0.35,1.05)] motion-reduce:transition-none">
        <i class="absolute -top-2 -left-1 w-10 h-4 rotate-[-18deg] rounded-full bg-linear-to-b from-white/60 to-transparent"></i>
      </span>
    </span>
  </label>
</section>

<section class="ttg-42 relative overflow-hidden w-full min-h-svh grid place-items-center px-5 py-14 bg-linear-140 from-ttg42-scenehi via-ttg42-scenemid to-ttg42-scenelo font-ttg42-sans" aria-label="Liquid glass toggle">
  <span aria-hidden="true" class="pointer-events-none absolute -top-16 left-[12%] w-96 h-96 rounded-full blur-[70px] opacity-80 bg-radial from-ttg42-bloba to-transparent to-70%"></span>
  <span aria-hidden="true" class="pointer-events-none absolute -bottom-20 right-[8%] w-96 h-96 rounded-full blur-[70px] opacity-80 bg-radial from-ttg42-blobb to-transparent to-70%"></span>
  <label for="ttg-42-sw" class="relative z-10 flex items-center gap-9 px-7 py-5 rounded-[24px] cursor-pointer bg-white/10 border border-white/25 backdrop-blur-xl shadow-[inset_0_1px_0_oklch(1_0_0/0.4),0_28px_56px_-28px_oklch(0_0_0/0.75)]">
    <span class="flex flex-col gap-0.5">
      <b class="text-[15.5px] font-semibold text-white">Lens blur</b>
      <small class="text-[12.5px] text-white/75">Refract the wallpaper behind panels</small>
    </span>
    <span class="relative shrink-0 w-[84px] h-11 rounded-full bg-white/12 border border-white/25 shadow-[inset_0_2px_6px_oklch(0_0_0/0.25)] transition-colors duration-[400ms] has-checked:bg-ttg42-tint/25">
      <span aria-hidden="true" class="ttg42-caustic pointer-events-none absolute top-2 left-2 w-8 h-8 rounded-full blur-lg bg-ttg42-caustic transition-transform duration-[400ms] ease-[cubic-bezier(0.3,1,0.35,1.05)] motion-reduce:transition-none"></span>
      <input type="checkbox" id="ttg-42-sw" role="switch" checked class="peer appearance-none absolute inset-0 w-full h-full rounded-full bg-transparent cursor-pointer z-20 focus-visible:outline-3 focus-visible:outline-white focus-visible:outline-offset-4">
      <span aria-hidden="true" class="ttg42-lens pointer-events-none absolute top-1 left-1 z-10 grid place-items-center w-9 h-9 rounded-full overflow-hidden bg-white/25 backdrop-blur-md backdrop-brightness-125 backdrop-saturate-150 shadow-[inset_0_1px_0_oklch(1_0_0/0.65),inset_0_-2px_6px_oklch(0_0_0/0.25),0_4px_12px_-2px_oklch(0_0_0/0.45)] transition-transform duration-[400ms] ease-[cubic-bezier(0.3,1,0.35,1.05)] motion-reduce:transition-none">
        <i class="absolute -top-2 -left-1 w-10 h-4 rotate-[-18deg] rounded-full bg-linear-to-b from-white/60 to-transparent"></i>
      </span>
    </span>
  </label>
</section>

@import "tailwindcss";

@theme {
  --color-ttg42-scenehi: #241344;
  --color-ttg42-scenehi: oklch(0.27 0.11 300);
  --color-ttg42-scenemid: #172a52;
  --color-ttg42-scenemid: oklch(0.31 0.09 268);
  --color-ttg42-scenelo: #0d3140;
  --color-ttg42-scenelo: oklch(0.33 0.06 215);
  --color-ttg42-bloba: #f05fc0;
  --color-ttg42-bloba: oklch(0.7 0.22 340);
  --color-ttg42-blobb: #4fd6e8;
  --color-ttg42-blobb: oklch(0.8 0.13 200);
  --color-ttg42-tint: #7cf0b4;
  --color-ttg42-tint: oklch(0.86 0.16 160);
  --color-ttg42-caustic: #ffe9a8;
  --color-ttg42-caustic: oklch(0.92 0.1 90 / 0.5);
  --font-ttg42-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

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

.ttg-42 input[type="checkbox"] {
  -webkit-appearance: none;
}

.ttg-42 label {
  -webkit-backdrop-filter: blur(24px);
}

.ttg-42 .ttg42-lens {
  -webkit-backdrop-filter: blur(6px) brightness(1.25) saturate(1.5);
}

.ttg-42 .peer:checked ~ .ttg42-lens {
  transform: translateX(40px);
}

.ttg-42 span:has(.peer:checked) .ttg42-caustic {
  transform: translateX(40px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ttg-42 label {
    background: oklch(0.26 0.06 290 / 0.9);
  }

  .ttg-42 .ttg42-lens {
    background: oklch(1 0 0 / 0.85);
  }
}

@import "tailwindcss";

@theme {
  --color-ttg42-scenehi: #241344;
  --color-ttg42-scenehi: oklch(0.27 0.11 300);
  --color-ttg42-scenemid: #172a52;
  --color-ttg42-scenemid: oklch(0.31 0.09 268);
  --color-ttg42-scenelo: #0d3140;
  --color-ttg42-scenelo: oklch(0.33 0.06 215);
  --color-ttg42-bloba: #f05fc0;
  --color-ttg42-bloba: oklch(0.7 0.22 340);
  --color-ttg42-blobb: #4fd6e8;
  --color-ttg42-blobb: oklch(0.8 0.13 200);
  --color-ttg42-tint: #7cf0b4;
  --color-ttg42-tint: oklch(0.86 0.16 160);
  --color-ttg42-caustic: #ffe9a8;
  --color-ttg42-caustic: oklch(0.92 0.1 90 / 0.5);
  --font-ttg42-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

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

.ttg-42 input[type="checkbox"] {
  -webkit-appearance: none;
}

.ttg-42 label {
  -webkit-backdrop-filter: blur(24px);
}

.ttg-42 .ttg42-lens {
  -webkit-backdrop-filter: blur(6px) brightness(1.25) saturate(1.5);
}

.ttg-42 .peer:checked ~ .ttg42-lens {
  transform: translateX(40px);
}

.ttg-42 span:has(.peer:checked) .ttg42-caustic {
  transform: translateX(40px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ttg-42 label {
    background: oklch(0.26 0.06 290 / 0.9);
  }

  .ttg-42 .ttg42-lens {
    background: oklch(1 0 0 / 0.85);
  }
}

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>

<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.

npm install tailwindcss @tailwindcss/vite

npm install tailwindcss @tailwindcss/vite

// vite.config.js  ("type": "module" in package.json)
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

// vite.config.js  ("type": "module" in package.json)
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist

@import "tailwindcss";

@theme {
  --color-ttg42-scenehi: #241344;
  --color-ttg42-scenehi: oklch(0.27 0.11 300);
  --color-ttg42-scenemid: #172a52;
  --color-ttg42-scenemid: oklch(0.31 0.09 268);
  --color-ttg42-scenelo: #0d3140;
  --color-ttg42-scenelo: oklch(0.33 0.06 215);
  --color-ttg42-bloba: #f05fc0;
  --color-ttg42-bloba: oklch(0.7 0.22 340);
  --color-ttg42-blobb: #4fd6e8;
  --color-ttg42-blobb: oklch(0.8 0.13 200);
  --color-ttg42-tint: #7cf0b4;
  --color-ttg42-tint: oklch(0.86 0.16 160);
  --color-ttg42-caustic: #ffe9a8;
  --color-ttg42-caustic: oklch(0.92 0.1 90 / 0.5);
  --font-ttg42-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

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

.ttg-42 input[type="checkbox"] {
  -webkit-appearance: none;
}

.ttg-42 label {
  -webkit-backdrop-filter: blur(24px);
}

.ttg-42 .ttg42-lens {
  -webkit-backdrop-filter: blur(6px) brightness(1.25) saturate(1.5);
}

.ttg-42 .peer:checked ~ .ttg42-lens {
  transform: translateX(40px);
}

.ttg-42 span:has(.peer:checked) .ttg42-caustic {
  transform: translateX(40px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ttg-42 label {
    background: oklch(0.26 0.06 290 / 0.9);
  }

  .ttg-42 .ttg42-lens {
    background: oklch(1 0 0 / 0.85);
  }
}

@import "tailwindcss";

@theme {
  --color-ttg42-scenehi: #241344;
  --color-ttg42-scenehi: oklch(0.27 0.11 300);
  --color-ttg42-scenemid: #172a52;
  --color-ttg42-scenemid: oklch(0.31 0.09 268);
  --color-ttg42-scenelo: #0d3140;
  --color-ttg42-scenelo: oklch(0.33 0.06 215);
  --color-ttg42-bloba: #f05fc0;
  --color-ttg42-bloba: oklch(0.7 0.22 340);
  --color-ttg42-blobb: #4fd6e8;
  --color-ttg42-blobb: oklch(0.8 0.13 200);
  --color-ttg42-tint: #7cf0b4;
  --color-ttg42-tint: oklch(0.86 0.16 160);
  --color-ttg42-caustic: #ffe9a8;
  --color-ttg42-caustic: oklch(0.92 0.1 90 / 0.5);
  --font-ttg42-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

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

.ttg-42 input[type="checkbox"] {
  -webkit-appearance: none;
}

.ttg-42 label {
  -webkit-backdrop-filter: blur(24px);
}

.ttg-42 .ttg42-lens {
  -webkit-backdrop-filter: blur(6px) brightness(1.25) saturate(1.5);
}

.ttg-42 .peer:checked ~ .ttg42-lens {
  transform: translateX(40px);
}

.ttg-42 span:has(.peer:checked) .ttg42-caustic {
  transform: translateX(40px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ttg-42 label {
    background: oklch(0.26 0.06 290 / 0.9);
  }

  .ttg-42 .ttg42-lens {
    background: oklch(1 0 0 / 0.85);
  }
}

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=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap">

<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=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap">

What changed in the port

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

backdrop-brightness-125 backdrop-saturate-150 alongside the blur is the whole difference between this and demo 21: blur alone frosts, but lifting brightness and saturation makes the thumb read as a lens focusing the scene.
The caustic is a sibling that must move with the thumb, and it precedes the input in source order — hence the two scoped rules rather than a contorted variant chain.
The crown highlight is a rotated gradient pill clipped by overflow-hidden on the lens, which is cheaper and sharper than a radial gradient trying to fake a curved reflection.
UI upgrade over demo 21: the thumb now refracts rather than merely sitting on the glass, the on state changes both fill and border (not a 22% wash alone), and supporting copy is white/75 with fully opaque headings for reliable contrast over a live backdrop.

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 Liquid Glass Toggle with Specular Highlight
Source: https://codefronts.com/components/tailwind-css-toggles-switches/tailwind-liquid-glass-toggle-specular-highlight/

Glass with a lens in it: the thumb brightens and saturates what sits behind it, carries a moving specular sweep across its crown, and drags a soft caustic shadow along the track. Demo 21 frosts a pane; this one bends light.
## HTML
```html
<section class="ttg-42 relative overflow-hidden w-full min-h-svh grid place-items-center px-5 py-14 bg-linear-140 from-ttg42-scenehi via-ttg42-scenemid to-ttg42-scenelo font-ttg42-sans" aria-label="Liquid glass toggle">
  <span aria-hidden="true" class="pointer-events-none absolute -top-16 left-[12%] w-96 h-96 rounded-full blur-[70px] opacity-80 bg-radial from-ttg42-bloba to-transparent to-70%"></span>
  <span aria-hidden="true" class="pointer-events-none absolute -bottom-20 right-[8%] w-96 h-96 rounded-full blur-[70px] opacity-80 bg-radial from-ttg42-blobb to-transparent to-70%"></span>
  <label for="ttg-42-sw" class="relative z-10 flex items-center gap-9 px-7 py-5 rounded-[24px] cursor-pointer bg-white/10 border border-white/25 backdrop-blur-xl shadow-[inset_0_1px_0_oklch(1_0_0/0.4),0_28px_56px_-28px_oklch(0_0_0/0.75)]">
    <span class="flex flex-col gap-0.5">
      <b class="text-[15.5px] font-semibold text-white">Lens blur</b>
      <small class="text-[12.5px] text-white/75">Refract the wallpaper behind panels</small>
    </span>
    <span class="relative shrink-0 w-[84px] h-11 rounded-full bg-white/12 border border-white/25 shadow-[inset_0_2px_6px_oklch(0_0_0/0.25)] transition-colors duration-[400ms] has-checked:bg-ttg42-tint/25">
      <span aria-hidden="true" class="ttg42-caustic pointer-events-none absolute top-2 left-2 w-8 h-8 rounded-full blur-lg bg-ttg42-caustic transition-transform duration-[400ms] ease-[cubic-bezier(0.3,1,0.35,1.05)] motion-reduce:transition-none"></span>
      <input type="checkbox" id="ttg-42-sw" role="switch" checked class="peer appearance-none absolute inset-0 w-full h-full rounded-full bg-transparent cursor-pointer z-20 focus-visible:outline-3 focus-visible:outline-white focus-visible:outline-offset-4">
      <span aria-hidden="true" class="ttg42-lens pointer-events-none absolute top-1 left-1 z-10 grid place-items-center w-9 h-9 rounded-full overflow-hidden bg-white/25 backdrop-blur-md backdrop-brightness-125 backdrop-saturate-150 shadow-[inset_0_1px_0_oklch(1_0_0/0.65),inset_0_-2px_6px_oklch(0_0_0/0.25),0_4px_12px_-2px_oklch(0_0_0/0.45)] transition-transform duration-[400ms] ease-[cubic-bezier(0.3,1,0.35,1.05)] motion-reduce:transition-none">
        <i class="absolute -top-2 -left-1 w-10 h-4 rotate-[-18deg] rounded-full bg-linear-to-b from-white/60 to-transparent"></i>
      </span>
    </span>
  </label>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-ttg42-scenehi: #241344;
  --color-ttg42-scenehi: oklch(0.27 0.11 300);
  --color-ttg42-scenemid: #172a52;
  --color-ttg42-scenemid: oklch(0.31 0.09 268);
  --color-ttg42-scenelo: #0d3140;
  --color-ttg42-scenelo: oklch(0.33 0.06 215);
  --color-ttg42-bloba: #f05fc0;
  --color-ttg42-bloba: oklch(0.7 0.22 340);
  --color-ttg42-blobb: #4fd6e8;
  --color-ttg42-blobb: oklch(0.8 0.13 200);
  --color-ttg42-tint: #7cf0b4;
  --color-ttg42-tint: oklch(0.86 0.16 160);
  --color-ttg42-caustic: #ffe9a8;
  --color-ttg42-caustic: oklch(0.92 0.1 90 / 0.5);
  --font-ttg42-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

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

.ttg-42 input[type="checkbox"] {
  -webkit-appearance: none;
}

.ttg-42 label {
  -webkit-backdrop-filter: blur(24px);
}

.ttg-42 .ttg42-lens {
  -webkit-backdrop-filter: blur(6px) brightness(1.25) saturate(1.5);
}

.ttg-42 .peer:checked ~ .ttg42-lens {
  transform: translateX(40px);
}

.ttg-42 span:has(.peer:checked) .ttg42-caustic {
  transform: translateX(40px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ttg-42 label {
    background: oklch(0.26 0.06 290 / 0.9);
  }

  .ttg-42 .ttg42-lens {
    background: oklch(1 0 0 / 0.85);
  }
}
```

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 Liquid Glass Toggle with Specular Highlight
Source: https://codefronts.com/components/tailwind-css-toggles-switches/tailwind-liquid-glass-toggle-specular-highlight/

Glass with a lens in it: the thumb brightens and saturates what sits behind it, carries a moving specular sweep across its crown, and drags a soft caustic shadow along the track. Demo 21 frosts a pane; this one bends light.
## HTML
```html
<section class="ttg-42 relative overflow-hidden w-full min-h-svh grid place-items-center px-5 py-14 bg-linear-140 from-ttg42-scenehi via-ttg42-scenemid to-ttg42-scenelo font-ttg42-sans" aria-label="Liquid glass toggle">
  <span aria-hidden="true" class="pointer-events-none absolute -top-16 left-[12%] w-96 h-96 rounded-full blur-[70px] opacity-80 bg-radial from-ttg42-bloba to-transparent to-70%"></span>
  <span aria-hidden="true" class="pointer-events-none absolute -bottom-20 right-[8%] w-96 h-96 rounded-full blur-[70px] opacity-80 bg-radial from-ttg42-blobb to-transparent to-70%"></span>
  <label for="ttg-42-sw" class="relative z-10 flex items-center gap-9 px-7 py-5 rounded-[24px] cursor-pointer bg-white/10 border border-white/25 backdrop-blur-xl shadow-[inset_0_1px_0_oklch(1_0_0/0.4),0_28px_56px_-28px_oklch(0_0_0/0.75)]">
    <span class="flex flex-col gap-0.5">
      <b class="text-[15.5px] font-semibold text-white">Lens blur</b>
      <small class="text-[12.5px] text-white/75">Refract the wallpaper behind panels</small>
    </span>
    <span class="relative shrink-0 w-[84px] h-11 rounded-full bg-white/12 border border-white/25 shadow-[inset_0_2px_6px_oklch(0_0_0/0.25)] transition-colors duration-[400ms] has-checked:bg-ttg42-tint/25">
      <span aria-hidden="true" class="ttg42-caustic pointer-events-none absolute top-2 left-2 w-8 h-8 rounded-full blur-lg bg-ttg42-caustic transition-transform duration-[400ms] ease-[cubic-bezier(0.3,1,0.35,1.05)] motion-reduce:transition-none"></span>
      <input type="checkbox" id="ttg-42-sw" role="switch" checked class="peer appearance-none absolute inset-0 w-full h-full rounded-full bg-transparent cursor-pointer z-20 focus-visible:outline-3 focus-visible:outline-white focus-visible:outline-offset-4">
      <span aria-hidden="true" class="ttg42-lens pointer-events-none absolute top-1 left-1 z-10 grid place-items-center w-9 h-9 rounded-full overflow-hidden bg-white/25 backdrop-blur-md backdrop-brightness-125 backdrop-saturate-150 shadow-[inset_0_1px_0_oklch(1_0_0/0.65),inset_0_-2px_6px_oklch(0_0_0/0.25),0_4px_12px_-2px_oklch(0_0_0/0.45)] transition-transform duration-[400ms] ease-[cubic-bezier(0.3,1,0.35,1.05)] motion-reduce:transition-none">
        <i class="absolute -top-2 -left-1 w-10 h-4 rotate-[-18deg] rounded-full bg-linear-to-b from-white/60 to-transparent"></i>
      </span>
    </span>
  </label>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-ttg42-scenehi: #241344;
  --color-ttg42-scenehi: oklch(0.27 0.11 300);
  --color-ttg42-scenemid: #172a52;
  --color-ttg42-scenemid: oklch(0.31 0.09 268);
  --color-ttg42-scenelo: #0d3140;
  --color-ttg42-scenelo: oklch(0.33 0.06 215);
  --color-ttg42-bloba: #f05fc0;
  --color-ttg42-bloba: oklch(0.7 0.22 340);
  --color-ttg42-blobb: #4fd6e8;
  --color-ttg42-blobb: oklch(0.8 0.13 200);
  --color-ttg42-tint: #7cf0b4;
  --color-ttg42-tint: oklch(0.86 0.16 160);
  --color-ttg42-caustic: #ffe9a8;
  --color-ttg42-caustic: oklch(0.92 0.1 90 / 0.5);
  --font-ttg42-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

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

.ttg-42 input[type="checkbox"] {
  -webkit-appearance: none;
}

.ttg-42 label {
  -webkit-backdrop-filter: blur(24px);
}

.ttg-42 .ttg42-lens {
  -webkit-backdrop-filter: blur(6px) brightness(1.25) saturate(1.5);
}

.ttg-42 .peer:checked ~ .ttg42-lens {
  transform: translateX(40px);
}

.ttg-42 span:has(.peer:checked) .ttg42-caustic {
  transform: translateX(40px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ttg-42 label {
    background: oklch(0.26 0.06 290 / 0.9);
  }

  .ttg-42 .ttg42-lens {
    background: oklch(1 0 0 / 0.85);
  }
}
```

How this works

A lens is a backdrop filter with more than blur. Brightness and saturation lift what is behind the thumb, so it reads as a solid piece of glass sitting on the scene rather than a translucent hole. That combination is what separates 2026 glass from 2020 frosted glass.

Two rims and a sweep make it round. A bright inset top edge, a dark inset underside, and a skewed highlight across the crown. All three are shadows and gradients — there is no image and no SVG anywhere in the demo.

The caustic sells the material. A blurred warm blob travels with the thumb underneath it, standing in for light focused through the lens. It is one blurred span and it is the difference between glass and plastic.

Make it yours

Cooler glass: drop backdrop-saturate-150 to 110 and raise brightness.
Bigger lens: scale the thumb and raise the blur together, or the edges look sharp against a soft interior.
Tinted glass: add a low-alpha colour to the thumb's background; keep it under 15%.
Drop the caustic for a flatter, more utilitarian glass.

Gotchas — read before shipping

backdrop-* filters sample what is actually behind the element — a solid background on any ancestor between them kills the effect.
Ship the @supports not fallback: without backdrop support the thumb is a transparent circle, which is worse than a plain switch.
Keep label text fully opaque. Translucent type over a live backdrop has no reliable contrast ratio.
Layered backdrop filters are GPU-expensive; one lens per view is fine, twenty in a list is not.

Browser support

Chrome	Safari	Firefox	Edge
111+	16.4+	128+	111+

backdrop-filter is Firefox 103+; the demo ships an @supports not fallback that swaps the lens for a solid frosted thumb.

Techniques used in this demo

Utilitiesfirst-class utility or variant

backdrop-filtertw ↗box-shadowtw ↗linear gradienttw ↗