47 Tailwind CSS Toggles & Switches
46 / 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 Morphing Sun-to-Moon Icon Toggle (SVG Stroke)

One SVG becomes two icons: the sun's rays retract into their own centres via stroke-dashoffset while a mask circle slides in to bite a crescent out of the disc. No icon swap, no second file — the same eight paths morph.

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-46 w-full min-h-svh grid place-items-center px-5 py-14 bg-ttg46-bg font-ttg46-sans transition-colors duration-500 has-checked:bg-ttg46-nightbg motion-reduce:transition-none" aria-label="Sun to moon icon toggle">
  <div class="flex flex-col items-center gap-6">
    <input type="checkbox" id="ttg-46-sw" role="switch" aria-label="Dark theme" class="peer sr-only">
    <label for="ttg-46-sw" class="grid place-items-center w-24 h-24 rounded-full cursor-pointer bg-ttg46-btn border border-ttg46-edge transition-colors duration-500 peer-checked:bg-ttg46-btnnight peer-checked:border-ttg46-edgenight peer-focus-visible:outline-3 peer-focus-visible:outline-ttg46-focus peer-focus-visible:outline-offset-4 peer-checked:[&_.ttg46-icon]:-rotate-[25deg] peer-checked:[&_.ttg46-ray]:[stroke-dashoffset:9px] peer-checked:[&_.ttg46-bite]:translate-x-0 peer-checked:[&_.ttg46-disc]:fill-ttg46-moon">
      <svg viewBox="0 0 48 48" class="ttg46-icon w-12 h-12 transition-transform duration-500 ease-[cubic-bezier(0.3,1,0.35,1.05)] motion-reduce:duration-75" aria-hidden="true">
        <defs>
          <mask id="ttg46-crescent">
            <rect x="0" y="0" width="48" height="48" fill="white"/>
            <circle class="ttg46-bite transition-transform duration-500 ease-[cubic-bezier(0.3,1,0.35,1.05)] translate-x-[26px] motion-reduce:duration-75" cx="30" cy="18" r="13" fill="black"/>
          </mask>
        </defs>
        <circle class="ttg46-disc fill-ttg46-sun transition-[fill] duration-500" cx="24" cy="24" r="10" mask="url(#ttg46-crescent)"/>
        <g class="ttg46-rays" stroke="currentColor" stroke-width="3" stroke-linecap="round" fill="none">
          <line class="ttg46-ray stroke-ttg46-sun [stroke-dasharray:9px] [stroke-dashoffset:0px] transition-[stroke-dashoffset,stroke] duration-300 [transition-delay:0ms]" x1="24" y1="3" x2="24" y2="10"/>
          <line class="ttg46-ray stroke-ttg46-sun [stroke-dasharray:9px] [stroke-dashoffset:0px] transition-[stroke-dashoffset,stroke] duration-300 [transition-delay:40ms]" x1="38.8" y1="9.2" x2="34" y2="14"/>
          <line class="ttg46-ray stroke-ttg46-sun [stroke-dasharray:9px] [stroke-dashoffset:0px] transition-[stroke-dashoffset,stroke] duration-300 [transition-delay:80ms]" x1="45" y1="24" x2="38" y2="24"/>
          <line class="ttg46-ray stroke-ttg46-sun [stroke-dasharray:9px] [stroke-dashoffset:0px] transition-[stroke-dashoffset,stroke] duration-300 [transition-delay:120ms]" x1="38.8" y1="38.8" x2="34" y2="34"/>
          <line class="ttg46-ray stroke-ttg46-sun [stroke-dasharray:9px] [stroke-dashoffset:0px] transition-[stroke-dashoffset,stroke] duration-300 [transition-delay:160ms]" x1="24" y1="45" x2="24" y2="38"/>
          <line class="ttg46-ray stroke-ttg46-sun [stroke-dasharray:9px] [stroke-dashoffset:0px] transition-[stroke-dashoffset,stroke] duration-300 [transition-delay:200ms]" x1="9.2" y1="38.8" x2="14" y2="34"/>
          <line class="ttg46-ray stroke-ttg46-sun [stroke-dasharray:9px] [stroke-dashoffset:0px] transition-[stroke-dashoffset,stroke] duration-300 [transition-delay:240ms]" x1="3" y1="24" x2="10" y2="24"/>
          <line class="ttg46-ray stroke-ttg46-sun [stroke-dasharray:9px] [stroke-dashoffset:0px] transition-[stroke-dashoffset,stroke] duration-300 [transition-delay:280ms]" x1="9.2" y1="9.2" x2="14" y2="14"/>
        </g>
      </svg>
    </label>
    <span class="flex flex-col items-center gap-1 text-center">
      <b class="text-[15.5px] font-semibold text-ttg46-ink transition-colors duration-500 peer-checked:text-ttg46-inknight">Dark theme</b>
      <span class="text-[12.5px] text-ttg46-mute transition-colors duration-500">One icon, morphed &mdash; not two icons swapped</span>
    </span>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-ttg46-bg: #f3f4f7;
  --color-ttg46-bg: oklch(0.96 0.005 265);
  --color-ttg46-nightbg: #0d1120;
  --color-ttg46-nightbg: oklch(0.18 0.03 270);
  --color-ttg46-btn: #ffffff;
  --color-ttg46-btn: oklch(1 0 0);
  --color-ttg46-btnnight: #191f33;
  --color-ttg46-btnnight: oklch(0.24 0.03 270);
  --color-ttg46-edge: #e5e7ee;
  --color-ttg46-edge: oklch(0.92 0.006 265);
  --color-ttg46-edgenight: #2a3350;
  --color-ttg46-edgenight: oklch(0.32 0.04 270);
  --color-ttg46-sun: #e8a317;
  --color-ttg46-sun: oklch(0.75 0.16 78);
  --color-ttg46-moon: #e6ecff;
  --color-ttg46-moon: oklch(0.93 0.03 270);
  --color-ttg46-ink: #222838;
  --color-ttg46-ink: oklch(0.27 0.018 265);
  --color-ttg46-inknight: #dfe4f2;
  --color-ttg46-inknight: oklch(0.91 0.015 270);
  --color-ttg46-mute: #7d8494;
  --color-ttg46-mute: oklch(0.6 0.018 265);
  --font-ttg46-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

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

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-ttg46-bg: #f3f4f7;
  --color-ttg46-bg: oklch(0.96 0.005 265);
  --color-ttg46-nightbg: #0d1120;
  --color-ttg46-nightbg: oklch(0.18 0.03 270);
  --color-ttg46-btn: #ffffff;
  --color-ttg46-btn: oklch(1 0 0);
  --color-ttg46-btnnight: #191f33;
  --color-ttg46-btnnight: oklch(0.24 0.03 270);
  --color-ttg46-edge: #e5e7ee;
  --color-ttg46-edge: oklch(0.92 0.006 265);
  --color-ttg46-edgenight: #2a3350;
  --color-ttg46-edgenight: oklch(0.32 0.04 270);
  --color-ttg46-sun: #e8a317;
  --color-ttg46-sun: oklch(0.75 0.16 78);
  --color-ttg46-moon: #e6ecff;
  --color-ttg46-moon: oklch(0.93 0.03 270);
  --color-ttg46-ink: #222838;
  --color-ttg46-ink: oklch(0.27 0.018 265);
  --color-ttg46-inknight: #dfe4f2;
  --color-ttg46-inknight: oklch(0.91 0.015 270);
  --color-ttg46-mute: #7d8494;
  --color-ttg46-mute: oklch(0.6 0.018 265);
  --font-ttg46-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.ttg-46 {
  width: 100%;
  min-height: 100svh;
}
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.

  • The rays' resting [stroke-dashoffset:0] is a UTILITY, not a scoped rule — and that is load-bearing. Tailwind emits utilities inside @layer utilities, and any unlayered CSS beats a layered rule regardless of specificity, so a plain .ttg46-ray { stroke-dashoffset: 0 } would silently outrank the peer-checked: variant and freeze the sun. Base states that a variant must override belong in the same layer as the variant.
  • Eight rays, eight [transition-delay:Nms] utilities written straight into the class list. A stagger of eight is the boundary where inline delays stay more readable than a loop — past that, generate the markup.
  • The crescent is an SVG <mask> with a translated circle, and the mask id is namespaced ttg46-crescent because SVG ids are document-global — the same discipline as the gooey filter in demo 04.
  • peer-checked:[&_.ttg46-disc]:fill-ttg46-moon works because Tailwind's fill-* utilities apply to SVG elements like any other; the icon needs no inline styling at all.
  • New in this set: a theme toggle whose icon is one object rather than a crossfade between two — and the reduced-motion path shortens every transition to 75ms instead of removing them, so the morph still reads as a change of state.
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 Morphing Sun-to-Moon Icon Toggle (SVG Stroke)
Source: https://codefronts.com/components/tailwind-css-toggles-switches/tailwind-morphing-sun-to-moon-icon-toggle/

One SVG becomes two icons: the sun's rays retract into their own centres via stroke-dashoffset while a mask circle slides in to bite a crescent out of the disc. No icon swap, no second file &mdash; the same eight paths morph.
## HTML
```html
<section class="ttg-46 w-full min-h-svh grid place-items-center px-5 py-14 bg-ttg46-bg font-ttg46-sans transition-colors duration-500 has-checked:bg-ttg46-nightbg motion-reduce:transition-none" aria-label="Sun to moon icon toggle">
  <div class="flex flex-col items-center gap-6">
    <input type="checkbox" id="ttg-46-sw" role="switch" aria-label="Dark theme" class="peer sr-only">
    <label for="ttg-46-sw" class="grid place-items-center w-24 h-24 rounded-full cursor-pointer bg-ttg46-btn border border-ttg46-edge transition-colors duration-500 peer-checked:bg-ttg46-btnnight peer-checked:border-ttg46-edgenight peer-focus-visible:outline-3 peer-focus-visible:outline-ttg46-focus peer-focus-visible:outline-offset-4 peer-checked:[&_.ttg46-icon]:-rotate-[25deg] peer-checked:[&_.ttg46-ray]:[stroke-dashoffset:9px] peer-checked:[&_.ttg46-bite]:translate-x-0 peer-checked:[&_.ttg46-disc]:fill-ttg46-moon">
      <svg viewBox="0 0 48 48" class="ttg46-icon w-12 h-12 transition-transform duration-500 ease-[cubic-bezier(0.3,1,0.35,1.05)] motion-reduce:duration-75" aria-hidden="true">
        <defs>
          <mask id="ttg46-crescent">
            <rect x="0" y="0" width="48" height="48" fill="white"/>
            <circle class="ttg46-bite transition-transform duration-500 ease-[cubic-bezier(0.3,1,0.35,1.05)] translate-x-[26px] motion-reduce:duration-75" cx="30" cy="18" r="13" fill="black"/>
          </mask>
        </defs>
        <circle class="ttg46-disc fill-ttg46-sun transition-[fill] duration-500" cx="24" cy="24" r="10" mask="url(#ttg46-crescent)"/>
        <g class="ttg46-rays" stroke="currentColor" stroke-width="3" stroke-linecap="round" fill="none">
          <line class="ttg46-ray stroke-ttg46-sun [stroke-dasharray:9px] [stroke-dashoffset:0px] transition-[stroke-dashoffset,stroke] duration-300 [transition-delay:0ms]" x1="24" y1="3" x2="24" y2="10"/>
          <line class="ttg46-ray stroke-ttg46-sun [stroke-dasharray:9px] [stroke-dashoffset:0px] transition-[stroke-dashoffset,stroke] duration-300 [transition-delay:40ms]" x1="38.8" y1="9.2" x2="34" y2="14"/>
          <line class="ttg46-ray stroke-ttg46-sun [stroke-dasharray:9px] [stroke-dashoffset:0px] transition-[stroke-dashoffset,stroke] duration-300 [transition-delay:80ms]" x1="45" y1="24" x2="38" y2="24"/>
          <line class="ttg46-ray stroke-ttg46-sun [stroke-dasharray:9px] [stroke-dashoffset:0px] transition-[stroke-dashoffset,stroke] duration-300 [transition-delay:120ms]" x1="38.8" y1="38.8" x2="34" y2="34"/>
          <line class="ttg46-ray stroke-ttg46-sun [stroke-dasharray:9px] [stroke-dashoffset:0px] transition-[stroke-dashoffset,stroke] duration-300 [transition-delay:160ms]" x1="24" y1="45" x2="24" y2="38"/>
          <line class="ttg46-ray stroke-ttg46-sun [stroke-dasharray:9px] [stroke-dashoffset:0px] transition-[stroke-dashoffset,stroke] duration-300 [transition-delay:200ms]" x1="9.2" y1="38.8" x2="14" y2="34"/>
          <line class="ttg46-ray stroke-ttg46-sun [stroke-dasharray:9px] [stroke-dashoffset:0px] transition-[stroke-dashoffset,stroke] duration-300 [transition-delay:240ms]" x1="3" y1="24" x2="10" y2="24"/>
          <line class="ttg46-ray stroke-ttg46-sun [stroke-dasharray:9px] [stroke-dashoffset:0px] transition-[stroke-dashoffset,stroke] duration-300 [transition-delay:280ms]" x1="9.2" y1="9.2" x2="14" y2="14"/>
        </g>
      </svg>
    </label>
    <span class="flex flex-col items-center gap-1 text-center">
      <b class="text-[15.5px] font-semibold text-ttg46-ink transition-colors duration-500 peer-checked:text-ttg46-inknight">Dark theme</b>
      <span class="text-[12.5px] text-ttg46-mute transition-colors duration-500">One icon, morphed &mdash; not two icons swapped</span>
    </span>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-ttg46-bg: #f3f4f7;
  --color-ttg46-bg: oklch(0.96 0.005 265);
  --color-ttg46-nightbg: #0d1120;
  --color-ttg46-nightbg: oklch(0.18 0.03 270);
  --color-ttg46-btn: #ffffff;
  --color-ttg46-btn: oklch(1 0 0);
  --color-ttg46-btnnight: #191f33;
  --color-ttg46-btnnight: oklch(0.24 0.03 270);
  --color-ttg46-edge: #e5e7ee;
  --color-ttg46-edge: oklch(0.92 0.006 265);
  --color-ttg46-edgenight: #2a3350;
  --color-ttg46-edgenight: oklch(0.32 0.04 270);
  --color-ttg46-sun: #e8a317;
  --color-ttg46-sun: oklch(0.75 0.16 78);
  --color-ttg46-moon: #e6ecff;
  --color-ttg46-moon: oklch(0.93 0.03 270);
  --color-ttg46-ink: #222838;
  --color-ttg46-ink: oklch(0.27 0.018 265);
  --color-ttg46-inknight: #dfe4f2;
  --color-ttg46-inknight: oklch(0.91 0.015 270);
  --color-ttg46-mute: #7d8494;
  --color-ttg46-mute: oklch(0.6 0.018 265);
  --font-ttg46-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

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

How this works

Rays retract, they do not fade. Each ray is a short line with stroke-dasharray equal to its own length; animating stroke-dashoffset to that same value draws it back into itself. Eight rays with staggered delays make the sun collapse from the outside in.

The crescent is a mask, not a second path. A circle inside an SVG <mask> starts off-canvas and slides over the disc when checked, subtracting a bite. That is how you get a true crescent whose edge is a perfect arc.

The rotation ties it together. Without the −25° turn the two states look like two icons; with it, one object transformed.

Make it yours

  • Stagger direction: reverse the delays to make the rays retract inward-out.
  • Faster morph: drop to 260ms and halve the stagger — it stays readable.
  • Different pair: a cloud/sun or lock/unlock morph works with the same dash technique.
  • Use it as a real theme switch by moving has-checked: up to the document element.

Gotchas — read before shipping

  • stroke-dasharray must match each ray's actual length, or the retraction leaves a stub or finishes early.
  • Dash values need UNITS in CSS: stroke-dashoffset: 9 is legal as an SVG presentation attribute but invalid as a CSS declaration, so the browser drops it and the rays never retract. Always write 9px in a utility.
  • Never set a variant's base value in unlayered CSS — unlayered declarations win over everything in @layer utilities, so the variant compiles correctly and still does nothing.
  • Give every mask a namespaced id — SVG ids are document-global and a second copy of the demo would silently reuse the first mask.
  • vector-effect: non-scaling-stroke if you scale the icon, or the strokes thicken with it.
  • Under motion-reduce: the icon must still change: the rays snap and the crescent jumps, rather than nothing happening.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

SVG masks and stroke-dash animation are universally supported; the demo has no feature-query fallback because there is nothing to fall back from.

Techniques used in this demo

Utilitiesfirst-class utility or variant

transitionstw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →