20 Pure CSS Toggles & Switches

css-only interactive dark-mode glassmorphism

A CSS toggle (or switch) is the binary on/off control most often used for settings — distinct from a checkbox by its visual emphasis on the current state. These 20 hand-coded toggles are accessible, keyboard-friendly, and zero-JS — copy the markup, label the state, and ship.

20 unique toggles 100% copy-paste ready Published May 11, 2026

01 / 20

Haptic Keys

Pure CSS

Chunky square key with a 3D press-depth shadow and a glowing accent ring on activate.

Live Demo Try it

02 / 20

Waveform Toggle

Pure CSS

Static audio bars spring to life with staggered breathing animations when toggled on.

Live Demo Try it

03 / 20

Timed Toggle

Pure CSS

An SVG arc fills around a circle when the toggle activates, visualising session time.

Live Demo Try it

04 / 20

Biometric Scan

Pure CSS

A scanline sweeps top-to-bottom, corner brackets glow lilac, and the icon ring lights up when activated.

Live Demo Try it

05 / 20

Split-Flap Board

Pure CSS

A retro-mechanical airport departure board built from CSS-only rotateX flips.

Live Demo Try it

06 / 20

Permission Stack

Pure CSS

Grouped consent UI with mini pill toggles inside stacked bordered rows.

Live Demo Try it

07 / 20

iOS

Pure CSS

The reference iOS-style pill toggle — translucent track, white thumb with a subtle drop shadow, smooth slide on toggle.

Live Demo Try it

08 / 20

Material Design

Pure CSS

Google Material Design 3 switch — track with rounded thumb that lifts and changes colour on toggle.

Live Demo Try it

09 / 20

Skeuomorphic Light Switch

Pure CSS

A physical rocker light switch — brushed metal bezel, plastic rocker that tilts on toggle, subtle shadow that deepens when pressed.

Live Demo Try it

10 / 20

Neon Cyber

Pure CSS

A glowing neon outline toggle — dark track with a cyan thumb that pulses with a soft glow when active.

Live Demo Try it

11 / 20

Brutalist

Pure CSS

Hard edges, no shadows, monospace label, raw markup feel.

Live Demo Try it

12 / 20

Day / Night

Pure CSS

A dark-mode toggle that morphs from a sun in a sky-blue track to a crescent moon over a deep night track.

Live Demo Try it

13 / 20

Flip Card

Pure CSS

A 3D flip toggle — front face shows OFF, back face shows ON.

Live Demo Try it

14 / 20

Sliding Pill with Label

Pure CSS

A track containing both labels (ON / OFF) with a thumb that slides over the active one.

Live Demo Try it

15 / 20

Glassmorphism

Pure CSS

A frosted-glass pill with a backdrop-blurred thumb.

Live Demo Try it

16 / 20

Skeuomorphic Knob

Pure CSS

A brushed-metal rotary knob that physically rotates 90 degrees on toggle.

Live Demo Try it

17 / 20

iOS Light Mode

Pure CSS

The iOS toggle in its light-theme presentation — clean white card backdrop, soft gray off-state, signature green on-state.

Live Demo Try it

18 / 20

Outline

Pure CSS

A pure-stroke toggle — track and thumb are outlines only, no fills.

Live Demo Try it

19 / 20

Bouncy Pebble

Pure CSS

A chunky outlined toggle with an organic "pebble" thumb shape built from 8-value border-radius syntax.

Live Demo Try it

20 / 20

Industrial Rocker

Pure CSS

A chunky industrial rocker switch with twin indicator lights, rotating "teeth" along the rail, and a color-shifting metallic thumb.

Live Demo Try it

FAQ

Frequently asked questions

How do I make a toggle switch in pure CSS?

Start from a real input type=checkbox — visually hide it but keep it in the DOM — and style a sibling label as the track, with a ::before or ::after pseudo-element as the sliding knob. The :checked pseudo-class moves the knob and recolours the track. All 20 switches here use this checkbox-driven pattern, so they stay accessible while looking fully custom.

What's the difference between a toggle switch and a checkbox?

Functionally they're the same control — both are an input type=checkbox under the hood. The difference is meaning and visuals: a checkbox suits 'select this option' choices, often in a group you submit later; a toggle switch suits an instant on/off setting (like dark mode or notifications) that takes effect immediately. A switch is just a checkbox styled to look like a physical switch.

Can a CSS toggle switch work without JavaScript?

Yes — all 20 toggles here are 100% pure CSS, zero JavaScript. The hidden checkbox's :checked state drives the entire animation: the knob slide, track colour, and any glow or bounce all come from input:checked ~ label rules.

Are these CSS toggle switches accessible?

Yes. Every switch keeps the real input type=checkbox (visually hidden, never display:none, so it stays focusable), tied to a label. Keyboard users Tab to it and toggle with Space, a visible focus state is provided, and continuous motion honours prefers-reduced-motion. For a true switch role, add role='switch' and aria-checked on real applications.

Can I use these toggle switches in React or other frameworks?

Yes. Each toggle is plain HTML and CSS — no dependencies, no build step. Drop the markup into React (use className and htmlFor), Vue, Svelte, Astro or static HTML and it works unchanged. All 20 designs are MIT licensed and free for commercial use.

Related collections

22 CSS Button Group Designs

22 dynamic CSS button groups with motion-driven interactions — plasma loops, holographic gradients, magnetic discs, wormhole tabs, particle aurora. Pure CSS or light JS, copy-paste ready.

button group css button group segmented control Responsive

43 CSS Button Designs

43 hand-coded CSS buttons — real-world materials like brushed brass and vinyl, interactive use-case buttons (add-to-cart, download, like, delete), and click-effect studies: magnetic mercury ripple, brutalist glitch, neon plasma burst, clay press, ink spread, and particle shards.

buttons hover animation Responsive

27 CSS Calendar Designs

27 hand-coded CSS calendar designs covering every search intent for 'css calendar' — pure-CSS calendar (no JavaScript), CSS Grid layouts, glassmorphism widgets, brutalist designs, dark mode UIs, neumorphic cards, horizontal timelines, sidebar widgets, booking date-range pickers, CSS Grid advent calendars, Fluent / Material Design, circular / radial layouts, retro neon cyberpunk, 3D flip cards, isometric dashboards, split-screen heroes, liquid micro-interactions, bento grid booking, vintage paper tear-offs, vertical timelines, kinetic typography, and slanted diagonal grids. 1 truly pure-CSS, 26 with small vanilla JS snippets for event handling. Scoped class names that never collide, prefers-reduced-motion respected, MIT-licensed.

css calendar css calendar design css calendar widget Responsive