47 Tailwind CSS Toggles & Switches
02 / 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 Dark Mode Sun / Moon Theme Switcher

The day/night switch, ported whole: the thumb is a glowing sun that morphs into a crescent via a single inset box-shadow transition, stars fade in, a cloud drifts out — and the surrounding panel re-themes itself through has-checked:, the utility form of :has(:checked).

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-02 w-full min-h-svh flex flex-col items-center justify-center gap-7 px-5 py-14 bg-ttg02-daybg text-ttg02-dayink font-ttg02-sans transition-colors duration-500 has-checked:bg-ttg02-nightbg has-checked:text-ttg02-nightink" aria-label="Dark mode sun and moon theme switcher">
  <label for="ttg-02-sw" class="flex items-center gap-7 min-h-14 px-6 py-4 rounded-2xl cursor-pointer transition-colors duration-500 bg-white/60 has-checked:bg-white/5 shadow-[0_1px_2px_oklch(0.4_0.05_250/0.08)]">
    <span class="flex flex-col gap-0.5">
      <span class="text-[15.5px] font-semibold">Appearance</span>
      <span class="text-[12.5px] opacity-60">Follows this switch, not the system</span>
    </span>
    <span class="relative inline-block shrink-0">
      <input type="checkbox" id="ttg-02-sw" role="switch" class="peer appearance-none block w-[74px] h-9 rounded-full cursor-pointer relative bg-ttg02-day bg-linear-to-b from-ttg02-day to-ttg02-dayhi transition-[background-color,background-image] duration-[450ms] shadow-[inset_0_2px_5px_oklch(0.35_0.09_250/0.3)] checked:from-ttg02-night checked:to-ttg02-nighthi before:content-[''] before:absolute before:top-1 before:left-1 before:w-7 before:h-7 before:rounded-full before:z-10 before:shadow-[inset_0_0_0_14px_#ffd54f,0_0_12px_oklch(0.85_0.17_85/0.75)] before:transition-[transform,box-shadow] before:duration-[450ms] before:ease-[cubic-bezier(0.3,1.2,0.4,1)] checked:before:translate-x-[38px] checked:before:shadow-[inset_-8px_-4px_0_1px_#f4f1de,0_0_10px_oklch(0.9_0.03_270/0.45)] focus-visible:outline-3 focus-visible:outline-ttg02-focus focus-visible:outline-offset-3 motion-reduce:transition-none motion-reduce:before:transition-none">
      <span aria-hidden="true" class="pointer-events-none absolute top-[9px] left-3 w-0.5 h-0.5 rounded-full bg-white opacity-0 transition-opacity duration-[450ms] shadow-[10px_4px_0_#fff,4px_14px_0_0_#dfe8ff,16px_16px_0_#fff,26px_7px_0_0_#dfe8ff] peer-checked:opacity-95 motion-reduce:transition-none"></span>
      <span aria-hidden="true" class="pointer-events-none absolute top-[19px] right-3 w-[18px] h-[7px] rounded-lg bg-white opacity-95 transition-[opacity,transform] duration-[450ms] shadow-[-7px_-4px_0_-1px_#fff,6px_-3px_0_-2px_#fff] peer-checked:opacity-0 peer-checked:translate-x-2 motion-reduce:transition-none"></span>
    </span>
  </label>
  <p class="font-ttg02-mono text-[11px] tracking-[0.14em] uppercase opacity-55">Sun &harr; moon &middot; pure Tailwind morph</p>
</section>
@import "tailwindcss";

@theme {
  --color-ttg02-day: #7ecbf5;
  --color-ttg02-day: oklch(0.8 0.1 235);
  --color-ttg02-dayhi: #b3e0f9;
  --color-ttg02-dayhi: oklch(0.88 0.06 235);
  --color-ttg02-night: #1c2a4a;
  --color-ttg02-night: oklch(0.3 0.06 265);
  --color-ttg02-nighthi: #0f1830;
  --color-ttg02-nighthi: oklch(0.22 0.05 265);
  --color-ttg02-daybg: #e7f2fb;
  --color-ttg02-daybg: oklch(0.95 0.02 235);
  --color-ttg02-dayink: #1f2936;
  --color-ttg02-dayink: oklch(0.29 0.02 250);
  --color-ttg02-nightbg: #0b1220;
  --color-ttg02-nightbg: oklch(0.18 0.03 265);
  --color-ttg02-nightink: #d5dcec;
  --color-ttg02-nightink: oklch(0.88 0.02 265);
  --color-ttg02-focus: #4d9fff;
  --color-ttg02-focus: oklch(0.7 0.16 250);
  --font-ttg02-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-ttg02-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

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

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

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-ttg02-day: #7ecbf5;
  --color-ttg02-day: oklch(0.8 0.1 235);
  --color-ttg02-dayhi: #b3e0f9;
  --color-ttg02-dayhi: oklch(0.88 0.06 235);
  --color-ttg02-night: #1c2a4a;
  --color-ttg02-night: oklch(0.3 0.06 265);
  --color-ttg02-nighthi: #0f1830;
  --color-ttg02-nighthi: oklch(0.22 0.05 265);
  --color-ttg02-daybg: #e7f2fb;
  --color-ttg02-daybg: oklch(0.95 0.02 235);
  --color-ttg02-dayink: #1f2936;
  --color-ttg02-dayink: oklch(0.29 0.02 250);
  --color-ttg02-nightbg: #0b1220;
  --color-ttg02-nightbg: oklch(0.18 0.03 265);
  --color-ttg02-nightink: #d5dcec;
  --color-ttg02-nightink: oklch(0.88 0.02 265);
  --color-ttg02-focus: #4d9fff;
  --color-ttg02-focus: oklch(0.7 0.16 250);
  --font-ttg02-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-ttg02-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

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

.ttg-02 input[type="checkbox"] {
  -webkit-appearance: none;
}
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&family=JetBrains+Mono:wght@400;500&display=swap">

What changed in the port

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

  • Two relationships, two variants: peer-checked: for the star field and cloud (siblings), has-checked: for the section and the label card (ancestors). The CSS original needed a ~ rule and a separate :has() rule; each element now declares its own reaction.
  • The sky gradient became bg-linear-to-b from-* to-* with checked:from-* checked:to-*, which is strictly better than the original's background-color transition — both stops now animate rather than just the base colour.
  • The four-star field stays an arbitrary shadow-[...]: it is a drawing, not a design-scale value, and promoting it to @theme would mint utilities nobody would reuse.
  • UI change from the CSS original: the switch gained a translucent card that re-themes with the panel, the label gained a second line so the control explains itself, and the night background moved from #0d1526 to oklch(0.18 0.03 265), lifting body text to 11:1 (it was 8.4:1).
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 Dark Mode Sun / Moon Theme Switcher
Source: https://codefronts.com/components/tailwind-css-toggles-switches/tailwind-dark-mode-sun-moon-theme-switcher/

The day/night switch, ported whole: the thumb is a glowing sun that morphs into a crescent via a single inset box-shadow transition, stars fade in, a cloud drifts out &mdash; and the surrounding panel re-themes itself through has-checked:, the utility form of :has(:checked).
## HTML
```html
<section class="ttg-02 w-full min-h-svh flex flex-col items-center justify-center gap-7 px-5 py-14 bg-ttg02-daybg text-ttg02-dayink font-ttg02-sans transition-colors duration-500 has-checked:bg-ttg02-nightbg has-checked:text-ttg02-nightink" aria-label="Dark mode sun and moon theme switcher">
  <label for="ttg-02-sw" class="flex items-center gap-7 min-h-14 px-6 py-4 rounded-2xl cursor-pointer transition-colors duration-500 bg-white/60 has-checked:bg-white/5 shadow-[0_1px_2px_oklch(0.4_0.05_250/0.08)]">
    <span class="flex flex-col gap-0.5">
      <span class="text-[15.5px] font-semibold">Appearance</span>
      <span class="text-[12.5px] opacity-60">Follows this switch, not the system</span>
    </span>
    <span class="relative inline-block shrink-0">
      <input type="checkbox" id="ttg-02-sw" role="switch" class="peer appearance-none block w-[74px] h-9 rounded-full cursor-pointer relative bg-ttg02-day bg-linear-to-b from-ttg02-day to-ttg02-dayhi transition-[background-color,background-image] duration-[450ms] shadow-[inset_0_2px_5px_oklch(0.35_0.09_250/0.3)] checked:from-ttg02-night checked:to-ttg02-nighthi before:content-[''] before:absolute before:top-1 before:left-1 before:w-7 before:h-7 before:rounded-full before:z-10 before:shadow-[inset_0_0_0_14px_#ffd54f,0_0_12px_oklch(0.85_0.17_85/0.75)] before:transition-[transform,box-shadow] before:duration-[450ms] before:ease-[cubic-bezier(0.3,1.2,0.4,1)] checked:before:translate-x-[38px] checked:before:shadow-[inset_-8px_-4px_0_1px_#f4f1de,0_0_10px_oklch(0.9_0.03_270/0.45)] focus-visible:outline-3 focus-visible:outline-ttg02-focus focus-visible:outline-offset-3 motion-reduce:transition-none motion-reduce:before:transition-none">
      <span aria-hidden="true" class="pointer-events-none absolute top-[9px] left-3 w-0.5 h-0.5 rounded-full bg-white opacity-0 transition-opacity duration-[450ms] shadow-[10px_4px_0_#fff,4px_14px_0_0_#dfe8ff,16px_16px_0_#fff,26px_7px_0_0_#dfe8ff] peer-checked:opacity-95 motion-reduce:transition-none"></span>
      <span aria-hidden="true" class="pointer-events-none absolute top-[19px] right-3 w-[18px] h-[7px] rounded-lg bg-white opacity-95 transition-[opacity,transform] duration-[450ms] shadow-[-7px_-4px_0_-1px_#fff,6px_-3px_0_-2px_#fff] peer-checked:opacity-0 peer-checked:translate-x-2 motion-reduce:transition-none"></span>
    </span>
  </label>
  <p class="font-ttg02-mono text-[11px] tracking-[0.14em] uppercase opacity-55">Sun &harr; moon &middot; pure Tailwind morph</p>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-ttg02-day: #7ecbf5;
  --color-ttg02-day: oklch(0.8 0.1 235);
  --color-ttg02-dayhi: #b3e0f9;
  --color-ttg02-dayhi: oklch(0.88 0.06 235);
  --color-ttg02-night: #1c2a4a;
  --color-ttg02-night: oklch(0.3 0.06 265);
  --color-ttg02-nighthi: #0f1830;
  --color-ttg02-nighthi: oklch(0.22 0.05 265);
  --color-ttg02-daybg: #e7f2fb;
  --color-ttg02-daybg: oklch(0.95 0.02 235);
  --color-ttg02-dayink: #1f2936;
  --color-ttg02-dayink: oklch(0.29 0.02 250);
  --color-ttg02-nightbg: #0b1220;
  --color-ttg02-nightbg: oklch(0.18 0.03 265);
  --color-ttg02-nightink: #d5dcec;
  --color-ttg02-nightink: oklch(0.88 0.02 265);
  --color-ttg02-focus: #4d9fff;
  --color-ttg02-focus: oklch(0.7 0.16 250);
  --font-ttg02-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-ttg02-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

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

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

How this works

The crescent is one transition, not two elements. Unchecked, the thumb carries shadow-[inset_0_0_0_14px_#ffd54f,0_0_12px_oklch(0.85_0.17_85/0.8)] — a 14px inset ring on a 28px circle fills it solid, so it reads as a sun. Checked, that becomes inset -8px -4px 0 1px: only a crescent-shaped sliver is painted. Because inset shadows clip to the border radius, the moon can never bleed past the thumb or mismatch the sky.

Two relationships, two variants. The stars and cloud are siblings of the input, so they use peer-checked:. The section is an ancestor, so it uses has-checked:. The CSS version needed a sibling combinator and a :has() rule in two different places; here each element states its own reaction.

Decorations stay out of the accessibility tree. Both spans carry aria-hidden="true"; only the input is announced, as a switch.

Make it yours

  • Retheme through --color-ttg02-day / --color-ttg02-night — sky, glow and panel all read them.
  • Add stars by appending offsets to the shadow-[...] list on the star span.
  • Hook a real theme: move has-checked: to the <html> element and swap tokens there instead of colours here.
  • Slow the celestial swap by raising both duration-[450ms] values together.

Gotchas — read before shipping

  • Draw the crescent with an INSET shadow, never an overlay circle — an overlay has to match the sky colour exactly and breaks the moment the track gradient changes.
  • peer only reaches later siblings. The star field and cloud must come AFTER the input in source order, exactly as they do here.
  • Crossfade with opacity, not hidden — a display change cannot transition and forces layout.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

has-checked: compiles to :has(:checked) (Firefox 121+); without it the switch still morphs perfectly and only the panel retheme is lost.

Techniques used in this demo

Utilitiesfirst-class utility or variant

:has()tw ↗box-shadowtw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →