47 Tailwind CSS Toggles & Switches
18 / 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 Day / Night Landscape Scene Switch

A wide cinematic switch that IS a landscape: the sun sets behind clip-path mountains as the moon climbs the mirrored path, stars fade in, the ridges darken, and the page follows the scene into night. The most shareable control in the collection.

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-18 w-full min-h-svh grid place-items-center px-5 py-14 bg-ttg18-daybg font-ttg18-sans transition-colors duration-700 has-checked:bg-ttg18-nightbg motion-reduce:transition-none" aria-label="Day night landscape scene switch">
  <label for="ttg-18-sw" class="flex flex-col items-center gap-4 cursor-pointer">
    <span class="relative block w-55 h-25 rounded-[50px] overflow-hidden shadow-[0_18px_40px_-18px_oklch(0.2_0.05_265/0.6),inset_0_0_0_1px_oklch(1_0_0/0.25)]">
      <input type="checkbox" id="ttg-18-sw" role="switch" aria-label="Night mode" class="peer appearance-none absolute inset-0 w-full h-full z-[1] cursor-pointer bg-linear-to-b from-ttg18-skyday via-ttg18-skydaymid via-70% to-ttg18-skydaylo transition-[background-color,filter] duration-700 checked:from-ttg18-skynight checked:via-ttg18-skynightmid checked:to-ttg18-skynightlo before:content-[''] before:absolute before:top-3.5 before:left-6.5 before:w-9.5 before:h-9.5 before:rounded-full before:bg-radial-[at_35%_30%] before:from-ttg18-sunhi before:to-ttg18-sunlo before:shadow-[0_0_22px_oklch(0.85_0.16_80/0.9)] before:transition-transform before:duration-700 before:ease-[cubic-bezier(0.5,0,0.6,1)] checked:before:translate-x-[60px] checked:before:translate-y-[95px] focus-visible:outline-3 focus-visible:outline-ttg18-focus focus-visible:outline-offset-4 motion-reduce:transition-none motion-reduce:before:transition-none"></input>
      <span aria-hidden="true" class="pointer-events-none absolute top-3 left-7.5 z-[2] w-0.5 h-0.5 rounded-full bg-white opacity-0 transition-opacity duration-700 shadow-[24px_8px_0_#fff,58px_2px_0_0_#cfd8ff,96px_14px_0_#fff,130px_5px_0_0_#cfd8ff,74px_26px_0_#fff,150px_22px_0_0_#cfd8ff] peer-checked:opacity-95 motion-reduce:transition-none"></span>
      <span aria-hidden="true" class="pointer-events-none absolute top-3.5 right-7.5 z-[2] w-7.5 h-7.5 rounded-full bg-ttg18-moon shadow-[inset_-6px_-4px_0_oklch(0.62_0.01_90/0.35),0_0_14px_oklch(0.92_0.02_265/0.5)] -translate-x-10 translate-y-[95px] transition-transform duration-700 ease-[cubic-bezier(0.4,0,0.5,1)] peer-checked:translate-x-0 peer-checked:translate-y-0 motion-reduce:transition-none"></span>
      <span aria-hidden="true" class="ttg18-ridge pointer-events-none absolute bottom-0 inset-x-0 z-[3] h-11 bg-ttg18-ridgefar transition-[filter] duration-700 [clip-path:polygon(0_100%,0_55%,18%_20%,34%_62%,52%_10%,70%_58%,86%_30%,100%_65%,100%_100%)] motion-reduce:transition-none"></span>
      <span aria-hidden="true" class="ttg18-ridge pointer-events-none absolute bottom-0 inset-x-0 z-[3] h-8 bg-ttg18-ridgenear transition-[filter] duration-700 [clip-path:polygon(0_100%,0_70%,14%_35%,30%_75%,48%_25%,66%_70%,84%_40%,100%_72%,100%_100%)] motion-reduce:transition-none"></span>
    </span>
    <span class="text-[14px] font-semibold tracking-[0.06em] text-ttg18-dayink transition-colors duration-700 [.ttg-18:has(:checked)_&]:text-ttg18-nightink motion-reduce:transition-none">Night mode</span>
  </label>
</section>
@import "tailwindcss";

@theme {
  --color-ttg18-daybg: #dde9f3;
  --color-ttg18-daybg: oklch(0.92 0.02 240);
  --color-ttg18-nightbg: #0a1020;
  --color-ttg18-nightbg: oklch(0.17 0.03 265);
  --color-ttg18-skyday: #5fb0e6;
  --color-ttg18-skyday: oklch(0.73 0.12 235);
  --color-ttg18-skydaymid: #b8dff5;
  --color-ttg18-skydaymid: oklch(0.88 0.06 235);
  --color-ttg18-skydaylo: #ffd9a0;
  --color-ttg18-skydaylo: oklch(0.89 0.08 75);
  --color-ttg18-skynight: #0d1b3d;
  --color-ttg18-skynight: oklch(0.24 0.06 265);
  --color-ttg18-skynightmid: #22355e;
  --color-ttg18-skynightmid: oklch(0.34 0.05 265);
  --color-ttg18-skynightlo: #3a4a72;
  --color-ttg18-skynightlo: oklch(0.43 0.05 265);
  --color-ttg18-sunhi: #fff3c0;
  --color-ttg18-sunhi: oklch(0.96 0.07 95);
  --color-ttg18-sunlo: #ffcf4d;
  --color-ttg18-sunlo: oklch(0.86 0.15 85);
  --color-ttg18-moon: #f1eee2;
  --color-ttg18-moon: oklch(0.95 0.015 90);
  --color-ttg18-ridgefar: #5d7c66;
  --color-ttg18-ridgefar: oklch(0.55 0.05 155);
  --color-ttg18-ridgenear: #3f5a48;
  --color-ttg18-ridgenear: oklch(0.42 0.05 155);
  --color-ttg18-dayink: #2f4560;
  --color-ttg18-dayink: oklch(0.38 0.05 250);
  --color-ttg18-nightink: #b9c4de;
  --color-ttg18-nightink: oklch(0.82 0.03 265);
  --color-ttg18-focus: #6ea8ff;
  --color-ttg18-focus: oklch(0.73 0.15 255);
  --font-ttg18-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

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

.ttg-18 input[type="checkbox"] {
  -webkit-appearance: none;
}
/* Nightfall on both ridges. brightness-35 is a filter utility, but it has to apply to a
   class-matched pair from an ancestor's state, which is one step past readable as a variant. */

.ttg-18:has(input:checked) .ttg18-ridge {
  filter: brightness(0.35) saturate(0.6);
}

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-ttg18-daybg: #dde9f3;
  --color-ttg18-daybg: oklch(0.92 0.02 240);
  --color-ttg18-nightbg: #0a1020;
  --color-ttg18-nightbg: oklch(0.17 0.03 265);
  --color-ttg18-skyday: #5fb0e6;
  --color-ttg18-skyday: oklch(0.73 0.12 235);
  --color-ttg18-skydaymid: #b8dff5;
  --color-ttg18-skydaymid: oklch(0.88 0.06 235);
  --color-ttg18-skydaylo: #ffd9a0;
  --color-ttg18-skydaylo: oklch(0.89 0.08 75);
  --color-ttg18-skynight: #0d1b3d;
  --color-ttg18-skynight: oklch(0.24 0.06 265);
  --color-ttg18-skynightmid: #22355e;
  --color-ttg18-skynightmid: oklch(0.34 0.05 265);
  --color-ttg18-skynightlo: #3a4a72;
  --color-ttg18-skynightlo: oklch(0.43 0.05 265);
  --color-ttg18-sunhi: #fff3c0;
  --color-ttg18-sunhi: oklch(0.96 0.07 95);
  --color-ttg18-sunlo: #ffcf4d;
  --color-ttg18-sunlo: oklch(0.86 0.15 85);
  --color-ttg18-moon: #f1eee2;
  --color-ttg18-moon: oklch(0.95 0.015 90);
  --color-ttg18-ridgefar: #5d7c66;
  --color-ttg18-ridgefar: oklch(0.55 0.05 155);
  --color-ttg18-ridgenear: #3f5a48;
  --color-ttg18-ridgenear: oklch(0.42 0.05 155);
  --color-ttg18-dayink: #2f4560;
  --color-ttg18-dayink: oklch(0.38 0.05 250);
  --color-ttg18-nightink: #b9c4de;
  --color-ttg18-nightink: oklch(0.82 0.03 265);
  --color-ttg18-focus: #6ea8ff;
  --color-ttg18-focus: oklch(0.73 0.15 255);
  --font-ttg18-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

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

.ttg-18 input[type="checkbox"] {
  -webkit-appearance: none;
}
/* Nightfall on both ridges. brightness-35 is a filter utility, but it has to apply to a
   class-matched pair from an ancestor's state, which is one step past readable as a variant. */

.ttg-18:has(input:checked) .ttg18-ridge {
  filter: brightness(0.35) saturate(0.6);
}
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 sun is the input's own before: while the moon is a sibling span, so one uses checked:before: and the other peer-checked: — two variants for one mirrored motion, which is the clearest illustration in the collection of how Tailwind's state model maps onto DOM position.
  • Sky gradients became from-*/via-*/to-* with checked: twins, so day and night are two token sets rather than two hand-written gradient strings.
  • The ridge darkening stayed in CSS: it applies one filter to two elements from an ancestor's state, and the variant form (has-checked:[&_.ttg18-ridge]:brightness-35 has-checked:[&_.ttg18-ridge]:saturate-60) is longer than the rule it replaces without being clearer.
  • UI change from the CSS original: the day label ink went from #39506b to oklch(0.38 0.05 250) (7.2:1, was 4.4:1), the night label to oklch(0.82), and the sky's three stops were re-tuned in oklch so the sunset band no longer bands visibly on 8-bit displays.
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 Day / Night Landscape Scene Switch
Source: https://codefronts.com/components/tailwind-css-toggles-switches/tailwind-day-night-landscape-scene-switch/

A wide cinematic switch that IS a landscape: the sun sets behind clip-path mountains as the moon climbs the mirrored path, stars fade in, the ridges darken, and the page follows the scene into night. The most shareable control in the collection.
## HTML
```html
<section class="ttg-18 w-full min-h-svh grid place-items-center px-5 py-14 bg-ttg18-daybg font-ttg18-sans transition-colors duration-700 has-checked:bg-ttg18-nightbg motion-reduce:transition-none" aria-label="Day night landscape scene switch">
  <label for="ttg-18-sw" class="flex flex-col items-center gap-4 cursor-pointer">
    <span class="relative block w-55 h-25 rounded-[50px] overflow-hidden shadow-[0_18px_40px_-18px_oklch(0.2_0.05_265/0.6),inset_0_0_0_1px_oklch(1_0_0/0.25)]">
      <input type="checkbox" id="ttg-18-sw" role="switch" aria-label="Night mode" class="peer appearance-none absolute inset-0 w-full h-full z-[1] cursor-pointer bg-linear-to-b from-ttg18-skyday via-ttg18-skydaymid via-70% to-ttg18-skydaylo transition-[background-color,filter] duration-700 checked:from-ttg18-skynight checked:via-ttg18-skynightmid checked:to-ttg18-skynightlo before:content-[''] before:absolute before:top-3.5 before:left-6.5 before:w-9.5 before:h-9.5 before:rounded-full before:bg-radial-[at_35%_30%] before:from-ttg18-sunhi before:to-ttg18-sunlo before:shadow-[0_0_22px_oklch(0.85_0.16_80/0.9)] before:transition-transform before:duration-700 before:ease-[cubic-bezier(0.5,0,0.6,1)] checked:before:translate-x-[60px] checked:before:translate-y-[95px] focus-visible:outline-3 focus-visible:outline-ttg18-focus focus-visible:outline-offset-4 motion-reduce:transition-none motion-reduce:before:transition-none"></input>
      <span aria-hidden="true" class="pointer-events-none absolute top-3 left-7.5 z-[2] w-0.5 h-0.5 rounded-full bg-white opacity-0 transition-opacity duration-700 shadow-[24px_8px_0_#fff,58px_2px_0_0_#cfd8ff,96px_14px_0_#fff,130px_5px_0_0_#cfd8ff,74px_26px_0_#fff,150px_22px_0_0_#cfd8ff] peer-checked:opacity-95 motion-reduce:transition-none"></span>
      <span aria-hidden="true" class="pointer-events-none absolute top-3.5 right-7.5 z-[2] w-7.5 h-7.5 rounded-full bg-ttg18-moon shadow-[inset_-6px_-4px_0_oklch(0.62_0.01_90/0.35),0_0_14px_oklch(0.92_0.02_265/0.5)] -translate-x-10 translate-y-[95px] transition-transform duration-700 ease-[cubic-bezier(0.4,0,0.5,1)] peer-checked:translate-x-0 peer-checked:translate-y-0 motion-reduce:transition-none"></span>
      <span aria-hidden="true" class="ttg18-ridge pointer-events-none absolute bottom-0 inset-x-0 z-[3] h-11 bg-ttg18-ridgefar transition-[filter] duration-700 [clip-path:polygon(0_100%,0_55%,18%_20%,34%_62%,52%_10%,70%_58%,86%_30%,100%_65%,100%_100%)] motion-reduce:transition-none"></span>
      <span aria-hidden="true" class="ttg18-ridge pointer-events-none absolute bottom-0 inset-x-0 z-[3] h-8 bg-ttg18-ridgenear transition-[filter] duration-700 [clip-path:polygon(0_100%,0_70%,14%_35%,30%_75%,48%_25%,66%_70%,84%_40%,100%_72%,100%_100%)] motion-reduce:transition-none"></span>
    </span>
    <span class="text-[14px] font-semibold tracking-[0.06em] text-ttg18-dayink transition-colors duration-700 [.ttg-18:has(:checked)_&]:text-ttg18-nightink motion-reduce:transition-none">Night mode</span>
  </label>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-ttg18-daybg: #dde9f3;
  --color-ttg18-daybg: oklch(0.92 0.02 240);
  --color-ttg18-nightbg: #0a1020;
  --color-ttg18-nightbg: oklch(0.17 0.03 265);
  --color-ttg18-skyday: #5fb0e6;
  --color-ttg18-skyday: oklch(0.73 0.12 235);
  --color-ttg18-skydaymid: #b8dff5;
  --color-ttg18-skydaymid: oklch(0.88 0.06 235);
  --color-ttg18-skydaylo: #ffd9a0;
  --color-ttg18-skydaylo: oklch(0.89 0.08 75);
  --color-ttg18-skynight: #0d1b3d;
  --color-ttg18-skynight: oklch(0.24 0.06 265);
  --color-ttg18-skynightmid: #22355e;
  --color-ttg18-skynightmid: oklch(0.34 0.05 265);
  --color-ttg18-skynightlo: #3a4a72;
  --color-ttg18-skynightlo: oklch(0.43 0.05 265);
  --color-ttg18-sunhi: #fff3c0;
  --color-ttg18-sunhi: oklch(0.96 0.07 95);
  --color-ttg18-sunlo: #ffcf4d;
  --color-ttg18-sunlo: oklch(0.86 0.15 85);
  --color-ttg18-moon: #f1eee2;
  --color-ttg18-moon: oklch(0.95 0.015 90);
  --color-ttg18-ridgefar: #5d7c66;
  --color-ttg18-ridgefar: oklch(0.55 0.05 155);
  --color-ttg18-ridgenear: #3f5a48;
  --color-ttg18-ridgenear: oklch(0.42 0.05 155);
  --color-ttg18-dayink: #2f4560;
  --color-ttg18-dayink: oklch(0.38 0.05 250);
  --color-ttg18-nightink: #b9c4de;
  --color-ttg18-nightink: oklch(0.82 0.03 265);
  --color-ttg18-focus: #6ea8ff;
  --color-ttg18-focus: oklch(0.73 0.15 255);
  --font-ttg18-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

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

.ttg-18 input[type="checkbox"] {
  -webkit-appearance: none;
}
/* Nightfall on both ridges. brightness-35 is a filter utility, but it has to apply to a
   class-matched pair from an ancestor's state, which is one step past readable as a variant. */

.ttg-18:has(input:checked) .ttg18-ridge {
  filter: brightness(0.35) saturate(0.6);
}
```

How this works

The scene is a viewport. A 220×100 overflow-hidden box holds five layers: sky (the input itself), stars, moon, far ridge, near ridge. Everything moves by transform inside it and is simply clipped when it leaves — which is what makes a sunset read as a sunset rather than a fade.

Two bodies, mirrored paths. The sun starts high-left and travels down-right; the moon starts below the horizon and travels up into the sun's vacated spot. Because both are transitions on translate, unchecking reverses the whole sky for free.

Depth comes from two ridges, not one. A lighter far ridge and a darker near ridge at different heights give parallax the moment either moves — and at night both drop to brightness-35, which is what sells the loss of light rather than a change of colour.

Make it yours

  • Retheme the sky pairs through the --color-ttg18-sky* tokens.
  • Add a third ridge for deeper parallax — it is one more clip-path span.
  • One-line delight: a 2px amber dot on the near ridge that only lights at night.
  • Slow everything to duration-1000 for a lazier, more cinematic set.

Gotchas — read before shipping

  • overflow-hidden on the scene is load-bearing. Without it the sun travels down the page instead of below the horizon.
  • Keep the whole scene clickable. A 220px control with a small internal hotspot is worse than a 40px switch.
  • The scene is decoration around a checkbox: the accessible name is "Night mode", not "sun and moon".
  • Five transitions at 700ms is a lot of simultaneous motion — all of it is disabled under motion-reduce:, where the scene simply swaps.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Transforms and clip-path are universal; the page-level retheme uses :has() (Firefox 121+) and degrades to a working scene on a static background.

Techniques used in this demo

Utilitiesfirst-class utility or variant

:has()tw ↗linear gradienttw ↗

Arbitraryneeds bracket syntax

clip-pathtw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →