47 hand-coded CSS toggle switches you can copy-paste into any project. The gallery covers iOS-style, Material Design 3, dark-mode sun/moon, neumorphic pill, gooey liquid morph, bouncy physics, inner ON/OFF text, SaaS pricing pill, haptic keycaps, waveform mute, timed auto-off, biometric hold-to-confirm, split-flap board, permission stack, skeuomorphic light switch, rotary knob, neon cyberpunk, brutalist, day/night landscape, 3D flip card, glassmorphism, industrial rocker, and an ARIA role="switch" reference implementation for forced-colors mode. Every switch is a real <input type="checkbox"> under the hood — keyboard-operable with Space, visible focus ring, honest state semantics. Scoped under .tgl-NN for no-collision pasting, prefers-reduced-motion guarded, framework-agnostic.
Related21 CSS Pricing Tables29 CSS Checkboxes24 CSS Radio Buttons
Published
Published
Published
Published
Published
Published
Published
Published
Published
Published
Published
Published
Published
Published
Published
Published
Published
Published
Published
Published
Published
Published
Published
Published
Published
Published
Published
PublishedUpdated
PublishedUpdated
PublishedUpdated
PublishedUpdated
PublishedUpdated
PublishedUpdated
PublishedUpdated
PublishedUpdated
PublishedUpdated
PublishedUpdated
PublishedUpdated
PublishedUpdated
PublishedUpdated
PublishedUpdated
PublishedUpdated
PublishedUpdated
PublishedUpdated
PublishedUpdated
PublishedUpdated
PublishedUpdated
<input type="checkbox"> and give it appearance:none so the input itself becomes the styled track — you keep native keyboard control (Space/Enter), focus management, form submission, and screen-reader semantics for free. Draw the sliding thumb as a ::before pseudo-element and move it with transform:translateX(). Add role="switch" so assistive tech announces the control as on/off rather than checked/unchecked, wire the label with <label for="…">, and expose a clear :focus-visible ring on the track. Demos 01 (iOS-style), 14 (Material Design 3), 24 (outline currentColor) and 47 (ARIA reference) all follow this contract exactly. Never use display:none to hide the checkbox — that pulls it out of the tab order and breaks keyboard operation for every visitor who does not use a mouse.<input type="checkbox">. Semantically they signal different intent: a checkbox reads as 'select this option', usually inside a form the user will submit later; a toggle switch reads as 'this setting is on or off right now', usually taking effect the moment the user activates it (dark mode, Wi-Fi, notifications, feature flags). WCAG APG lets you promote a checkbox to a switch with role="switch", at which point assistive tech announces it as on or off. Pick a switch when the change is immediate and reversible; keep a checkbox when the value is part of a bigger form that must be submitted. All 47 designs in this gallery are switch-shaped, but 40 of them use a native checkbox as the source of truth so form submission still works if you need it.:checked pseudo-class on the hidden checkbox drives every animation: the thumb slide, track colour, glow, bounce, gooey morph, background retheme (via :has()), page-level dark mode, sliding label, sun-to-moon crescent, split-flap flip and every other visual state. Four demos require JavaScript because the interaction genuinely cannot be expressed in CSS alone: Demo 08 (Haptic Mechanical Keycap) fires the Vibration API on toggle, Demo 10 (Timed Auto-Off) needs a setTimeout countdown that flips the switch back, Demo 11 (Biometric Hold-to-Confirm) needs a pointer hold duration + release-cancel gesture, and Demo 47 (Accessible ARIA switch) uses a button[role="switch"] reference implementation with focus-management for forced-colors mode. Every JS snippet ships in the code panel — no gallery globals, no hidden dependencies.display:none), tied to a visible <label>. Keyboard users Tab to the control and toggle with Space. Every visual replacement carries a :focus-visible outline in a colour that meets WCAG 2.2 non-text contrast (3:1 against the surface). Where the semantics fit, the input carries role="switch" so assistive tech announces 'on/off' rather than 'checked/unchecked'. Every continuous animation is guarded by @media (prefers-reduced-motion: reduce) that drops long transitions and halts loops. Demo 47 is the reference ARIA implementation for forced-colors mode (Windows high-contrast) — the switch draws its state with CanvasText and Highlight system colours instead of custom hex, so the switch is legible even when the user's OS forcibly overrides the palette.class to className for React and for to htmlFor, and the switch works unchanged. Every rule is scoped under .tgl-NN, so 47 switches can coexist on one page without collision — and pasting a single switch into your own project cannot bleed into your global styles. All 47 designs are MIT-licensed for commercial use, including SaaS dashboards, marketing sites, e-commerce checkouts and mobile web apps.transform. Wire the toggle to your pricing table with :has() — .pricing:has(#billing-yearly:checked) .plan-price can multiply the visible number by 0.83 (17% off), and the same selector can reveal a 'Save 2 months' badge. For a hydrated React setup, read the checkbox state into your pricing component's useState hook, but the switch itself needs zero JavaScript. Pair with schema.org PriceSpecification and Offer nodes so Google surfaces the discount in rich results. This is the highest-CPM toggle keyword in the collection — SaaS pricing pages earn $15-25 RPM in tier-1 markets.#34c759 on-state, :active stretch to 32px matching the native squash. Demo 14 (Material Design 3 Switch) follows the M3 spec — larger track, elevated thumb with a state-layer ripple on hover, icon inside the thumb when checked, oklch-based dynamic colour tokens. Demo 23 (iOS Light Mode Settings List) reproduces the full Settings-app row pattern with the switch right-aligned inside a divider list. There is no dedicated Windows Fluent switch here yet, but Demo 47 (ARIA role=switch reference) uses forced-colors system tokens and reads correctly in Windows high-contrast mode which is the accessibility contract Fluent enforces. Match the system your users expect: iOS/macOS visitors read Demo 01/23, Android/Chrome OS visitors read Demo 14.:has(). For HIPAA-adjacent disclosure toggles (share PHI with a specific provider, opt into marketing communications), pair the switch with a visible timestamp caption that records the moment of consent — the browser cannot audit the click for you, so your backend records the state change with a server-side timestamp.
15 mouse-aware 3D tilt hover cards — e-commerce product spotlight, glassmorphism parallax team card, interactive pricing tier, holographic NFT collectible, pop-out mascot, dark tech grid with border glow, media player album art, blog article preview, cyberpunk neon glow, dashboard KPI widget, minimalist real estate, flip-to-back tilt, mobile app showcase, course learning card, and a Pure CSS touch-friendly tilt. Vanilla JS writes --rx/--ry/--mx/--my; all rendering stays in CSS on the GPU.
24 hand-coded CSS animated card patterns organised by what triggers the motion, not by card style. Scroll and entrance triggers: staggered grid reveals, @starting-style mount-in, scroll-driven scale and fade on animation-timeline: view(), View Transitions API card-to-detail morphs, blur-to-sharp lazy image loading, and FLIP re-layout when a filter changes. State-change triggers: add-to-cart success morph, like and save particle burst, expand and collapse to intrinsic height with calc-size(), swipe-to-dismiss on Pointer Events, and skeleton-to-loaded crossfade. Data-driven triggers: count-up KPI metrics, SVG sparkline draw-on-enter, and progress ring fill on load. Ambient idle loops: breathing glow, floating drift, animated gradient mesh backgrounds, conic rotating borders, auto-cycling testimonial decks, and live status pulses. Plus four hover patterns where the effect is the topic itself: cursor spotlight, holographic foil glare, corner ribbon slide, and horizontal accordion expand. Every card is scoped under a .ac-NN prefix for no-collision pasting, guards prefers-reduced-motion, animates compositor-only properties, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
22 hand-coded CSS avatars for chat apps, team dashboards, comment threads, account menus, and social profiles. Covers circular and squircle shapes, gradient and conic story rings, hexagon clip-path crops, online status dots, notification count badges, verified checkmarks, stacked facepiles with plus-N overflow, initials fallbacks for users without photos, broken-image recovery, avatar pickers, and a size scale system where the ring, badge, and status dot all scale from a single custom property.