47 Tailwind CSS Toggles & Switches
37 / 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 Neon Toggle with Animated Conic Border Light

Demo 16's neon, but the light moves: a registered <angle> property spins a conic gradient around the frame, masked into a 2px border, so an armed switch has a single point of light running its perimeter. The chase IS the on state.

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-37 w-full min-h-svh flex flex-col items-center justify-center gap-8 px-5 py-14 bg-ttg37-bg font-ttg37-mono" aria-label="Neon toggle with running border light">
  <label for="ttg-37-sw" class="group relative flex items-center gap-6 p-0.5 rounded-2xl cursor-pointer has-checked:[&_.ttg37-ring]:animate-ttg37-spin has-checked:[&_.ttg37-ring]:opacity-100 motion-reduce:has-checked:[&_.ttg37-ring]:animate-none">
    <span aria-hidden="true" class="ttg37-ring pointer-events-none absolute inset-0 rounded-2xl opacity-0 transition-opacity duration-300 [background:conic-gradient(from_var(--ttg37-a,0deg),transparent_0deg,var(--color-ttg37-live)_40deg,transparent_110deg)] [mask:linear-gradient(#000_0_0)_content-box,linear-gradient(#000_0_0)] [mask-composite:exclude] p-0.5"></span>
    <span aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-2xl border border-ttg37-cold transition-colors duration-300 group-has-checked:border-transparent"></span>
    <span class="relative flex items-center gap-6 px-7 py-5 rounded-[15px] bg-ttg37-panel">
      <span class="flex flex-col gap-0.5">
        <b class="text-[14px] font-bold tracking-[0.18em] text-ttg37-dim transition-colors duration-300 group-has-checked:text-ttg37-live">REACTOR</b>
        <span class="text-[11px] tracking-[0.12em] text-ttg37-mute">Coolant loop &middot; primary</span>
      </span>
      <input type="checkbox" id="ttg-37-sw" role="switch" aria-label="Reactor" class="peer appearance-none shrink-0 w-16 h-8 rounded-full bg-ttg37-track relative cursor-pointer transition-[background-color,box-shadow] duration-300 before:content-[''] before:absolute before:top-1 before:left-1 before:w-6 before:h-6 before:rounded-full before:bg-ttg37-thumboff before:transition-[transform,background-color,box-shadow] before:duration-300 checked:bg-ttg37-trackon checked:shadow-[0_0_14px_-2px_var(--color-ttg37-live)] checked:before:translate-x-8 checked:before:bg-ttg37-live checked:before:shadow-[0_0_10px_var(--color-ttg37-live)] focus-visible:outline-3 focus-visible:outline-ttg37-live focus-visible:outline-offset-4 motion-reduce:transition-none motion-reduce:before:transition-none">
    </span>
  </label>
  <p class="text-[11px] tracking-[0.2em] uppercase text-ttg37-mute">Armed = light runs the perimeter</p>
</section>
@import "tailwindcss";
/* An angle must be registered to animate; a plain custom property jumps. */

@property --ttg37-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@theme {
  --color-ttg37-bg: #07060d;
  --color-ttg37-bg: oklch(0.13 0.02 290);
  --color-ttg37-panel: #110f1c;
  --color-ttg37-panel: oklch(0.18 0.025 290);
  --color-ttg37-cold: #2b2740;
  --color-ttg37-cold: oklch(0.3 0.03 290);
  --color-ttg37-live: #57f2d0;
  --color-ttg37-live: oklch(0.86 0.15 175);
  --color-ttg37-track: #1b1830;
  --color-ttg37-track: oklch(0.23 0.03 290);
  --color-ttg37-trackon: #123a38;
  --color-ttg37-trackon: oklch(0.32 0.07 180);
  --color-ttg37-thumboff: #4a4566;
  --color-ttg37-thumboff: oklch(0.45 0.04 290);
  --color-ttg37-dim: #8c85ab;
  --color-ttg37-dim: oklch(0.63 0.04 290);
  --color-ttg37-mute: #7b7599;
  --color-ttg37-mute: oklch(0.58 0.04 290);
  --font-ttg37-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --animate-ttg37-spin: ttg37-spin 3s linear infinite;
}

@keyframes ttg37-spin {
  to {
    --ttg37-a: 360deg;
  }
}

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

.ttg-37 input[type="checkbox"] {
  -webkit-appearance: none;
}
/* Reduced motion keeps the border lit, just still. */

@media (prefers-reduced-motion: reduce) {
  .ttg-37 label:has(:checked) .ttg37-ring {
    --ttg37-a: 140deg;
  }
}

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";
/* An angle must be registered to animate; a plain custom property jumps. */

@property --ttg37-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@theme {
  --color-ttg37-bg: #07060d;
  --color-ttg37-bg: oklch(0.13 0.02 290);
  --color-ttg37-panel: #110f1c;
  --color-ttg37-panel: oklch(0.18 0.025 290);
  --color-ttg37-cold: #2b2740;
  --color-ttg37-cold: oklch(0.3 0.03 290);
  --color-ttg37-live: #57f2d0;
  --color-ttg37-live: oklch(0.86 0.15 175);
  --color-ttg37-track: #1b1830;
  --color-ttg37-track: oklch(0.23 0.03 290);
  --color-ttg37-trackon: #123a38;
  --color-ttg37-trackon: oklch(0.32 0.07 180);
  --color-ttg37-thumboff: #4a4566;
  --color-ttg37-thumboff: oklch(0.45 0.04 290);
  --color-ttg37-dim: #8c85ab;
  --color-ttg37-dim: oklch(0.63 0.04 290);
  --color-ttg37-mute: #7b7599;
  --color-ttg37-mute: oklch(0.58 0.04 290);
  --font-ttg37-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --animate-ttg37-spin: ttg37-spin 3s linear infinite;
}

@keyframes ttg37-spin {
  to {
    --ttg37-a: 360deg;
  }
}

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

.ttg-37 input[type="checkbox"] {
  -webkit-appearance: none;
}
/* Reduced motion keeps the border lit, just still. */

@media (prefers-reduced-motion: reduce) {
  .ttg-37 label:has(:checked) .ttg37-ring {
    --ttg37-a: 140deg;
  }
}
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;800&display=swap">

What changed in the port

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

  • The mask-composite border trick is the piece worth stealing: [mask:linear-gradient(#000_0_0)_content-box,linear-gradient(#000_0_0)] with [mask-composite:exclude] turns any filled gradient into a gradient stroke, and the padding utility sets its width.
  • @keyframes animating a custom property is only legal because of the @property registration above it — the same mechanism as demos 10 and 11, used here for rotation rather than progress.
  • The cold border is a second absolutely-positioned span rather than a border on the panel, so the lit ring can fade in over it without the two strokes ever double-drawing at the corners.
  • UI upgrade over demo 16: the on state is motion rather than a colour swap, the off state keeps a legible cold border and oklch(0.63) legend ink (4.9:1) instead of going nearly black, and the reduced-motion path parks the light at a fixed angle so the armed state is still obvious.
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 Neon Toggle with Animated Conic Border Light
Source: https://codefronts.com/components/tailwind-css-toggles-switches/tailwind-neon-toggle-animated-conic-border-light/

Demo 16's neon, but the light moves: a registered <angle> property spins a conic gradient around the frame, masked into a 2px border, so an armed switch has a single point of light running its perimeter. The chase IS the on state.
## HTML
```html
<section class="ttg-37 w-full min-h-svh flex flex-col items-center justify-center gap-8 px-5 py-14 bg-ttg37-bg font-ttg37-mono" aria-label="Neon toggle with running border light">
  <label for="ttg-37-sw" class="group relative flex items-center gap-6 p-0.5 rounded-2xl cursor-pointer has-checked:[&_.ttg37-ring]:animate-ttg37-spin has-checked:[&_.ttg37-ring]:opacity-100 motion-reduce:has-checked:[&_.ttg37-ring]:animate-none">
    <span aria-hidden="true" class="ttg37-ring pointer-events-none absolute inset-0 rounded-2xl opacity-0 transition-opacity duration-300 [background:conic-gradient(from_var(--ttg37-a,0deg),transparent_0deg,var(--color-ttg37-live)_40deg,transparent_110deg)] [mask:linear-gradient(#000_0_0)_content-box,linear-gradient(#000_0_0)] [mask-composite:exclude] p-0.5"></span>
    <span aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-2xl border border-ttg37-cold transition-colors duration-300 group-has-checked:border-transparent"></span>
    <span class="relative flex items-center gap-6 px-7 py-5 rounded-[15px] bg-ttg37-panel">
      <span class="flex flex-col gap-0.5">
        <b class="text-[14px] font-bold tracking-[0.18em] text-ttg37-dim transition-colors duration-300 group-has-checked:text-ttg37-live">REACTOR</b>
        <span class="text-[11px] tracking-[0.12em] text-ttg37-mute">Coolant loop &middot; primary</span>
      </span>
      <input type="checkbox" id="ttg-37-sw" role="switch" aria-label="Reactor" class="peer appearance-none shrink-0 w-16 h-8 rounded-full bg-ttg37-track relative cursor-pointer transition-[background-color,box-shadow] duration-300 before:content-[''] before:absolute before:top-1 before:left-1 before:w-6 before:h-6 before:rounded-full before:bg-ttg37-thumboff before:transition-[transform,background-color,box-shadow] before:duration-300 checked:bg-ttg37-trackon checked:shadow-[0_0_14px_-2px_var(--color-ttg37-live)] checked:before:translate-x-8 checked:before:bg-ttg37-live checked:before:shadow-[0_0_10px_var(--color-ttg37-live)] focus-visible:outline-3 focus-visible:outline-ttg37-live focus-visible:outline-offset-4 motion-reduce:transition-none motion-reduce:before:transition-none">
    </span>
  </label>
  <p class="text-[11px] tracking-[0.2em] uppercase text-ttg37-mute">Armed = light runs the perimeter</p>
</section>
```
## CSS
```css
@import "tailwindcss";
/* An angle must be registered to animate; a plain custom property jumps. */

@property --ttg37-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@theme {
  --color-ttg37-bg: #07060d;
  --color-ttg37-bg: oklch(0.13 0.02 290);
  --color-ttg37-panel: #110f1c;
  --color-ttg37-panel: oklch(0.18 0.025 290);
  --color-ttg37-cold: #2b2740;
  --color-ttg37-cold: oklch(0.3 0.03 290);
  --color-ttg37-live: #57f2d0;
  --color-ttg37-live: oklch(0.86 0.15 175);
  --color-ttg37-track: #1b1830;
  --color-ttg37-track: oklch(0.23 0.03 290);
  --color-ttg37-trackon: #123a38;
  --color-ttg37-trackon: oklch(0.32 0.07 180);
  --color-ttg37-thumboff: #4a4566;
  --color-ttg37-thumboff: oklch(0.45 0.04 290);
  --color-ttg37-dim: #8c85ab;
  --color-ttg37-dim: oklch(0.63 0.04 290);
  --color-ttg37-mute: #7b7599;
  --color-ttg37-mute: oklch(0.58 0.04 290);
  --font-ttg37-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --animate-ttg37-spin: ttg37-spin 3s linear infinite;
}

@keyframes ttg37-spin {
  to {
    --ttg37-a: 360deg;
  }
}

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

.ttg-37 input[type="checkbox"] {
  -webkit-appearance: none;
}
/* Reduced motion keeps the border lit, just still. */

@media (prefers-reduced-motion: reduce) {
  .ttg-37 label:has(:checked) .ttg37-ring {
    --ttg37-a: 140deg;
  }
}
```

How this works

A gradient border is a masked gradient box. Fill a wrapper with the conic gradient, pad it by the border width, then mask with two stacked layers — one clipped to the content box, one to the whole box — composited with exclude. What remains is the padding ring. This is the only reliable way to put an animated gradient on a border.

The rotation is a registered angle. --ttg37-a is declared as an <angle>, so the browser can interpolate it; a 3s linear keyframe takes it 0 → 360deg and the conic's start angle follows. No transform, no extra element, and the ring stays perfectly aligned to the rounded rect.

Off is not dark, it is cold. The tube keeps a dim static border and the legend drops to a desaturated grey, so the unarmed state is still legible — the failure mode of most neon UI is that off looks broken.

Make it yours

  • Speed: the duration in --animate-ttg37-spin. Under 2s it reads frantic; over 5s it reads dead.
  • Two-tone chase: add a second colour stop to the conic and the light becomes a comet.
  • Thicker tube: raise p-0.5 to p-1 — padding is the stroke width.
  • Rehue through --color-ttg37-live; the ring, the bloom and the legend all read it.

Gotchas — read before shipping

  • Without @property registration the angle is a plain custom property, and a plain custom property cannot animate — the chase will jump from 0 to 360 with nothing in between.
  • mask-composite: exclude needs both mask layers; dropping either leaves a filled box instead of a ring.
  • A perpetually rotating light in peripheral vision is real motion — it stops entirely under motion-reduce:, replaced by a static lit border.
  • Keep the tube's interior dark. The mask trick puts the gradient behind the content box, so a translucent interior shows the chase through the middle.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

@property (Firefox 128+) drives the rotation and mask-composite is Baseline; without @property the border stays lit but static, which is a clean fallback.

Techniques used in this demo

Utilitiesfirst-class utility or variant

conic-gradient()tw ↗text shadowtw ↗:has()tw ↗

Arbitraryneeds bracket syntax

mask-compositetw ↗

Plain CSSno Tailwind surface

@propertytw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →