47 Tailwind CSS Toggles & Switches
21 / 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
Pure TailwindMIT licensed

Tailwind Glassmorphism Frosted Toggle with backdrop-blur

A frosted-glass switch floating over a vivid scene: backdrop-blur-[14px] backdrop-saturate-150 on the pane, a denser frost puck for the thumb, and two drifting gradient blobs behind it that visibly refract through both as it slides.

Live Demo
Plain CSSTailwind v4
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-21 relative overflow-hidden w-full min-h-svh grid place-items-center px-5 py-14 bg-linear-135 from-ttg21-scenehi to-ttg21-scenelo font-ttg21-sans" aria-label="Glassmorphism frosted toggle">
  <span aria-hidden="true" class="absolute top-[6%] left-[14%] w-85 h-85 rounded-full blur-[60px] opacity-85 bg-radial from-ttg21-bloba to-transparent to-70% animate-ttg21-drift motion-reduce:animate-none"></span>
  <span aria-hidden="true" class="absolute bottom-[4%] right-[12%] w-85 h-85 rounded-full blur-[60px] opacity-85 bg-radial from-ttg21-blobb to-transparent to-70% animate-ttg21-drift [animation-delay:-4.5s] motion-reduce:animate-none"></span>
  <label for="ttg-21-sw" class="relative z-10 flex items-center gap-9 px-7 py-5 rounded-[20px] cursor-pointer bg-white/10 border border-white/30 backdrop-blur-[14px] backdrop-saturate-150 shadow-[inset_0_1px_0_oklch(1_0_0/0.35),0_24px_50px_-24px_oklch(0_0_0/0.7)]">
    <span class="flex flex-col gap-0.5">
      <b class="text-[16px] font-semibold text-white">Ambient blur</b>
      <small class="text-[12.5px] text-white/75">Frost the dock &amp; sidebar</small>
    </span>
    <input type="checkbox" id="ttg-21-sw" role="switch" checked class="appearance-none shrink-0 w-19 h-10 rounded-[22px] relative cursor-pointer bg-white/15 border border-white/35 backdrop-blur-[8px] shadow-[inset_0_1px_0_oklch(1_0_0/0.3)] transition-[background-color,border-color] duration-[350ms] checked:bg-ttg21-tint/25 checked:border-ttg21-tint/70 before:content-[''] before:absolute before:top-1 before:left-1 before:w-7.5 before:h-7.5 before:rounded-full before:bg-white/80 before:shadow-[0_3px_10px_oklch(0_0_0/0.35),inset_0_1px_0_#fff] before:transition-transform before:duration-[350ms] before:ease-[cubic-bezier(0.3,1,0.35,1.05)] checked:before:translate-x-9 focus-visible:outline-3 focus-visible:outline-white focus-visible:outline-offset-3 motion-reduce:transition-none motion-reduce:before:transition-none">
  </label>
</section>
@import "tailwindcss";

@theme {
  --color-ttg21-scenehi: #1d1038;
  --color-ttg21-scenehi: oklch(0.24 0.08 300);
  --color-ttg21-scenelo: #0c2438;
  --color-ttg21-scenelo: oklch(0.27 0.06 235);
  --color-ttg21-bloba: #e05fd0;
  --color-ttg21-bloba: oklch(0.68 0.24 330);
  --color-ttg21-blobb: #56cbe8;
  --color-ttg21-blobb: oklch(0.75 0.16 200);
  --color-ttg21-tint: #7cf0b4;
  --color-ttg21-tint: oklch(0.86 0.16 160);
  --font-ttg21-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --animate-ttg21-drift: ttg21-drift 9s ease-in-out infinite alternate;
}

@keyframes ttg21-drift {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(46px, -30px);
  }
}

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

.ttg-21 input[type="checkbox"] {
  -webkit-appearance: none;
  -webkit-backdrop-filter: blur(8px);
}

.ttg-21 label {
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
}
/* Without backdrop-filter the pane is fully transparent and the label becomes unreadable,
   so the fallback is a solid surface rather than a slightly different glass. */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ttg-21 label {
    background: oklch(0.25 0.05 290 / 0.88);
  }

  .ttg-21 input[type="checkbox"] {
    background: oklch(1 0 0 / 0.16);
  }
}

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-ttg21-scenehi: #1d1038;
  --color-ttg21-scenehi: oklch(0.24 0.08 300);
  --color-ttg21-scenelo: #0c2438;
  --color-ttg21-scenelo: oklch(0.27 0.06 235);
  --color-ttg21-bloba: #e05fd0;
  --color-ttg21-bloba: oklch(0.68 0.24 330);
  --color-ttg21-blobb: #56cbe8;
  --color-ttg21-blobb: oklch(0.75 0.16 200);
  --color-ttg21-tint: #7cf0b4;
  --color-ttg21-tint: oklch(0.86 0.16 160);
  --font-ttg21-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --animate-ttg21-drift: ttg21-drift 9s ease-in-out infinite alternate;
}

@keyframes ttg21-drift {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(46px, -30px);
  }
}

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

.ttg-21 input[type="checkbox"] {
  -webkit-appearance: none;
  -webkit-backdrop-filter: blur(8px);
}

.ttg-21 label {
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
}
/* Without backdrop-filter the pane is fully transparent and the label becomes unreadable,
   so the fallback is a solid surface rather than a slightly different glass. */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ttg-21 label {
    background: oklch(0.25 0.05 290 / 0.88);
  }

  .ttg-21 input[type="checkbox"] {
    background: oklch(1 0 0 / 0.16);
  }
}
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">

What changed in the port

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

  • backdrop-blur-* and backdrop-saturate-* compose into one backdrop-filter correctly, which is the single strongest argument for utilities on this demo — hand-written CSS routinely declares the property twice and silently drops the first.
  • The -webkit-backdrop-filter prefixes and the @supports not fallback both stay in CSS. Tailwind emits the unprefixed property only, and a feature query has no variant form (nor should it).
  • Alpha is expressed with Tailwind's slash syntax throughout (bg-white/10, checked:bg-ttg21-tint/25) rather than as pre-mixed rgba tokens, so one tint colour serves the fill, the border and the glow at three different opacities.
  • UI change from the CSS original: supporting text went from rgba(255,255,255,.65) to white/75 and the checked state now also brightens the border — previously the only on-signal was a 22% green wash, which is roughly a 1.2:1 change and effectively invisible to anyone with reduced colour vision.
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 Glassmorphism Frosted Toggle with backdrop-blur
Source: https://codefronts.com/components/tailwind-css-toggles-switches/tailwind-glassmorphism-frosted-toggle-backdrop-blur/

A frosted-glass switch floating over a vivid scene: backdrop-blur-[14px] backdrop-saturate-150 on the pane, a denser frost puck for the thumb, and two drifting gradient blobs behind it that visibly refract through both as it slides.
## HTML
```html
<section class="ttg-21 relative overflow-hidden w-full min-h-svh grid place-items-center px-5 py-14 bg-linear-135 from-ttg21-scenehi to-ttg21-scenelo font-ttg21-sans" aria-label="Glassmorphism frosted toggle">
  <span aria-hidden="true" class="absolute top-[6%] left-[14%] w-85 h-85 rounded-full blur-[60px] opacity-85 bg-radial from-ttg21-bloba to-transparent to-70% animate-ttg21-drift motion-reduce:animate-none"></span>
  <span aria-hidden="true" class="absolute bottom-[4%] right-[12%] w-85 h-85 rounded-full blur-[60px] opacity-85 bg-radial from-ttg21-blobb to-transparent to-70% animate-ttg21-drift [animation-delay:-4.5s] motion-reduce:animate-none"></span>
  <label for="ttg-21-sw" class="relative z-10 flex items-center gap-9 px-7 py-5 rounded-[20px] cursor-pointer bg-white/10 border border-white/30 backdrop-blur-[14px] backdrop-saturate-150 shadow-[inset_0_1px_0_oklch(1_0_0/0.35),0_24px_50px_-24px_oklch(0_0_0/0.7)]">
    <span class="flex flex-col gap-0.5">
      <b class="text-[16px] font-semibold text-white">Ambient blur</b>
      <small class="text-[12.5px] text-white/75">Frost the dock &amp; sidebar</small>
    </span>
    <input type="checkbox" id="ttg-21-sw" role="switch" checked class="appearance-none shrink-0 w-19 h-10 rounded-[22px] relative cursor-pointer bg-white/15 border border-white/35 backdrop-blur-[8px] shadow-[inset_0_1px_0_oklch(1_0_0/0.3)] transition-[background-color,border-color] duration-[350ms] checked:bg-ttg21-tint/25 checked:border-ttg21-tint/70 before:content-[''] before:absolute before:top-1 before:left-1 before:w-7.5 before:h-7.5 before:rounded-full before:bg-white/80 before:shadow-[0_3px_10px_oklch(0_0_0/0.35),inset_0_1px_0_#fff] before:transition-transform before:duration-[350ms] before:ease-[cubic-bezier(0.3,1,0.35,1.05)] checked:before:translate-x-9 focus-visible:outline-3 focus-visible:outline-white focus-visible:outline-offset-3 motion-reduce:transition-none motion-reduce:before:transition-none">
  </label>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-ttg21-scenehi: #1d1038;
  --color-ttg21-scenehi: oklch(0.24 0.08 300);
  --color-ttg21-scenelo: #0c2438;
  --color-ttg21-scenelo: oklch(0.27 0.06 235);
  --color-ttg21-bloba: #e05fd0;
  --color-ttg21-bloba: oklch(0.68 0.24 330);
  --color-ttg21-blobb: #56cbe8;
  --color-ttg21-blobb: oklch(0.75 0.16 200);
  --color-ttg21-tint: #7cf0b4;
  --color-ttg21-tint: oklch(0.86 0.16 160);
  --font-ttg21-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --animate-ttg21-drift: ttg21-drift 9s ease-in-out infinite alternate;
}

@keyframes ttg21-drift {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(46px, -30px);
  }
}

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

.ttg-21 input[type="checkbox"] {
  -webkit-appearance: none;
  -webkit-backdrop-filter: blur(8px);
}

.ttg-21 label {
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
}
/* Without backdrop-filter the pane is fully transparent and the label becomes unreadable,
   so the fallback is a solid surface rather than a slightly different glass. */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ttg-21 label {
    background: oklch(0.25 0.05 290 / 0.88);
  }

  .ttg-21 input[type="checkbox"] {
    background: oklch(1 0 0 / 0.16);
  }
}
```

How this works

Glass needs three layers or it is just a grey box. Something colourful behind (two blurred gradient blobs), a translucent pane that blurs what is behind it, and light edges — a hairline white border plus an inset top highlight that implies thickness. Remove any one and the effect collapses.

The thumb is denser glass, not white. Higher alpha and its own blur make it read as a puck resting ON the pane rather than a hole punched through it.

The tint must stay gentle. Checked, the track goes to roughly 20% green. Push it past 30% and the material reads as painted plastic — which is why the state also carries a brighter border, so the signal survives without the fill getting heavier.

Make it yours

  • Recolour the scene through the two blob tokens; the glass adapts on its own.
  • Milkier pane: backdrop-blur-[20px] and bg-white/25.
  • Add a specular sweep: a rotated white stripe at 6% alpha across the track.
  • State tints: amber for pending, green for on, red for blocked — all at the same low alpha.

Gotchas — read before shipping

  • backdrop-filter samples what is BEHIND the element. A solid background on the parent kills the effect entirely — this is the number-one reason glass demos look flat when pasted into a real page.
  • Ship the @supports not fallback. Firefox before 103 and several Android WebViews render the pane fully transparent without it, which makes the label unreadable rather than merely unstyled.
  • Translucency erodes contrast. Keep label text fully opaque white and the focus ring solid — never white/70 on a pane whose backdrop you do not control.
  • Two 340px blurred blobs on an infinite loop are the most expensive thing in this collection; they are paused under motion-reduce: and should be dropped entirely on low-end targets.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

backdrop-filter is broadly supported (Firefox 103+); the demo ships an @supports not fallback with a solid pane so the control stays readable without it.

Techniques used in this demo

Utilitiesfirst-class utility or variant

backdrop-filtertw ↗radial-gradient()tw ↗box-shadowtw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →