29 Tailwind CSS Checkboxes
11 / 29

All 29 in 29 Tailwind CSS Checkboxes

  1. 01Tailwind CSS Toggle Switch — iOS-Style SaaS Settings
  2. 02Tailwind Filter Chip Checkbox — Style Checkbox as Button
  3. 03Tailwind Pricing Plan Card Select — Checkbox-Style Selectable Cards
  4. 04Pure Tailwind CSS Accordion with Checkbox — No JavaScript
  5. 05Tailwind Indeterminate Checkbox — Select All with Tri-State
  6. 06Accessible Custom Checkbox in Tailwind CSS — WCAG Focus Ring
  7. 07Tailwind Slide Toggle with ON/OFF Labels — GPU translate3d
  8. 08Neon Glow Checkbox in Tailwind CSS — Dark Mode Gaming UI
  9. 09Animated SVG Checkmark in Tailwind CSS — stroke-dashoffset Draw
  10. 10Bouncy Checkbox Animation in Tailwind CSS — Spring cubic-bezier
  11. 11Glassmorphism Checkbox in Tailwind CSS — backdrop-blur Frosted Glass
  12. 12Neumorphism Checkbox in Tailwind CSS — Soft UI
  13. 13Liquid Fill Checkbox Animation in Tailwind CSS — Water Wave
  14. 14Rotating Ring Checkbox in Tailwind CSS — Spin-to-Check
  15. 15Brutalist Checkbox in Tailwind CSS — Neo-Brutalism Hard Shadow
  16. 16Animated Gradient Checkbox in Tailwind CSS — Rainbow Sweep
  17. 173D Flip Checkbox in Tailwind CSS — perspective & backface-hidden
  18. 18Material Ripple Checkbox in Tailwind CSS — State Layer & Wave
  19. 19Retro Pixel Art Checkbox in Tailwind CSS — 8-Bit Arcade Menu
  20. 20Tailwind CSS To-Do List Checkbox with Animated Strikethrough
  21. 21Gooey Blob Checkbox in Tailwind CSS — blur + contrast Filter
  22. 22Tailwind Dark Mode Toggle Switch — Sun & Moon, No JavaScript
  23. 23Pulse Ring Checkbox in Tailwind CSS — Live Status Indicator
  24. 24Tailwind CSS Dash-to-Check SVG Morph Checkbox
  25. 25Tri-State Checkbox in Tailwind CSS + JavaScript — Done / N/A / Unset
  26. 26Magnetic Hover Checkbox in Tailwind CSS + JavaScript
  27. 27Confetti Checkbox Animation in Tailwind CSS — Pure CSS Particle Burst
  28. 28Slide-In Label Checkbox in Tailwind CSS — Saved Tag Reveal
  29. 29Aurora Gradient Toggle Switch in Tailwind CSS — Premium Dark UI
Pure TailwindMIT licensed

Glassmorphism Checkbox in Tailwind CSS — backdrop-blur Frosted Glass

Frosted-glass checkboxes on a panel that actually has something to blur: two soft colour orbs drift behind backdrop-blur-xl backdrop-saturate-150. Browsers without backdrop-filter get an opaque tinted panel via supports-[backdrop-filter:blur(1px)]:, so the white text never lands on a bright gradient.

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="tcb-11 relative isolate w-full min-h-svh grid place-items-center overflow-hidden bg-linear-135 from-tcb11-a via-tcb11-b via-55% to-tcb11-c px-5 py-14 font-tcb11-sans text-white selection:bg-white/60 selection:text-tcb11-deep" aria-label="Glassmorphism checkboxes">
  <span aria-hidden="true" class="absolute left-[calc(50%-11rem)] top-[calc(50%-8rem)] -z-10 size-48 rounded-full bg-tcb11-orb1 blur-2xl"></span>
  <span aria-hidden="true" class="absolute left-[calc(50%+3rem)] top-[calc(50%+1rem)] -z-10 size-40 rounded-full bg-tcb11-orb2 blur-2xl"></span>
  <div class="flex w-full max-w-[25rem] flex-col gap-1.5 rounded-3xl border border-white/35 bg-tcb11-solid p-4 shadow-tcb11-panel supports-[backdrop-filter:blur(1px)]:bg-white/15 supports-[backdrop-filter:blur(1px)]:backdrop-blur-xl supports-[backdrop-filter:blur(1px)]:backdrop-saturate-150">
    <label class="group flex min-h-12 cursor-pointer items-center gap-3.5 rounded-xl px-3 transition-colors hover:bg-white/10"><input type="checkbox" class="peer sr-only" checked><span aria-hidden="true" class="grid size-[26px] flex-none place-items-center rounded-lg border-[1.5px] border-white/60 bg-white/20 text-tcb11-deep shadow-tcb11-bevel backdrop-blur-sm transition-colors duration-250 peer-checked:border-white/90 peer-checked:bg-white/70 peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-white motion-reduce:transition-none"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="size-[15px] scale-50 opacity-0 transition duration-200 ease-[cubic-bezier(.2,.9,.3,1.3)] group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="text-[15px] font-medium [text-shadow:0_1px_2px_rgb(40_10_70/0.35)]">Ambient sounds</span></label>
    <label class="group flex min-h-12 cursor-pointer items-center gap-3.5 rounded-xl px-3 transition-colors hover:bg-white/10"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="grid size-[26px] flex-none place-items-center rounded-lg border-[1.5px] border-white/60 bg-white/20 text-tcb11-deep shadow-tcb11-bevel backdrop-blur-sm transition-colors duration-250 peer-checked:border-white/90 peer-checked:bg-white/70 peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-white motion-reduce:transition-none"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="size-[15px] scale-50 opacity-0 transition duration-200 ease-[cubic-bezier(.2,.9,.3,1.3)] group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="text-[15px] font-medium [text-shadow:0_1px_2px_rgb(40_10_70/0.35)]">Auto-brightness</span></label>
    <label class="group flex min-h-12 cursor-pointer items-center gap-3.5 rounded-xl px-3 transition-colors hover:bg-white/10"><input type="checkbox" class="peer sr-only" checked><span aria-hidden="true" class="grid size-[26px] flex-none place-items-center rounded-lg border-[1.5px] border-white/60 bg-white/20 text-tcb11-deep shadow-tcb11-bevel backdrop-blur-sm transition-colors duration-250 peer-checked:border-white/90 peer-checked:bg-white/70 peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-white motion-reduce:transition-none"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="size-[15px] scale-50 opacity-0 transition duration-200 ease-[cubic-bezier(.2,.9,.3,1.3)] group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="text-[15px] font-medium [text-shadow:0_1px_2px_rgb(40_10_70/0.35)]">Reduce transparency</span></label>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tcb11-a: #a55ee8;
  --color-tcb11-a: oklch(0.62 0.2 300);
  --color-tcb11-b: #3aa6d8;
  --color-tcb11-b: oklch(0.66 0.13 230);
  --color-tcb11-c: #f07d4f;
  --color-tcb11-c: oklch(0.7 0.16 45);
  --color-tcb11-orb1: #ff5fa2;
  --color-tcb11-orb1: oklch(0.7 0.2 355);
  --color-tcb11-orb2: #5bf0d0;
  --color-tcb11-orb2: oklch(0.86 0.13 175);
  --color-tcb11-solid: #5b3c9e;
  --color-tcb11-solid: oklch(0.43 0.15 295);
  --color-tcb11-deep: #4a2394;
  --color-tcb11-deep: oklch(0.38 0.17 293);
  --font-tcb11-sans: 'DM Sans', system-ui, sans-serif;
  --shadow-tcb11-panel: 0 20px 50px -24px rgb(30 10 60 / 0.55);
  --shadow-tcb11-bevel: inset 0 1px 2px rgb(255 255 255 / 0.6), inset 0 -2px 4px rgb(80 40 120 / 0.2);
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles. */

.tcb-11 {
  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-tcb11-a: #a55ee8;
  --color-tcb11-a: oklch(0.62 0.2 300);
  --color-tcb11-b: #3aa6d8;
  --color-tcb11-b: oklch(0.66 0.13 230);
  --color-tcb11-c: #f07d4f;
  --color-tcb11-c: oklch(0.7 0.16 45);
  --color-tcb11-orb1: #ff5fa2;
  --color-tcb11-orb1: oklch(0.7 0.2 355);
  --color-tcb11-orb2: #5bf0d0;
  --color-tcb11-orb2: oklch(0.86 0.13 175);
  --color-tcb11-solid: #5b3c9e;
  --color-tcb11-solid: oklch(0.43 0.15 295);
  --color-tcb11-deep: #4a2394;
  --color-tcb11-deep: oklch(0.38 0.17 293);
  --font-tcb11-sans: 'DM Sans', system-ui, sans-serif;
  --shadow-tcb11-panel: 0 20px 50px -24px rgb(30 10 60 / 0.55);
  --shadow-tcb11-bevel: inset 0 1px 2px rgb(255 255 255 / 0.6), inset 0 -2px 4px rgb(80 40 120 / 0.2);
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles. */

.tcb-11 {
  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=DM+Sans:opsz,wght@9..40,400..700&display=swap">

What changed in the port

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

  • -webkit-backdrop-filter:blur(16px) saturate(140%) became backdrop-blur-xl backdrop-saturate-150; Tailwind writes the prefix.
  • The stage gradient became bg-linear-135 from-* via-* via-55% to-* — v4's gradient syntax with token colours.
  • UI upgrade from the CSS original: two blurred orbs sit behind the panel so the glass effect is visible — the original blurred a smooth gradient, which looks identical to no blur.
  • UI upgrade: an @supports fallback gives non-blurring browsers an opaque panel (white text at 8.9:1 instead of ~2:1 on the orange stop), and rows tint on hover.
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: Glassmorphism Checkbox in Tailwind CSS — backdrop-blur Frosted Glass
Source: https://codefronts.com/components/tailwind-css-checkboxes/glassmorphism-checkbox-tailwind-backdrop-blur/

Frosted-glass checkboxes on a panel that actually has something to blur: two soft colour orbs drift behind backdrop-blur-xl backdrop-saturate-150. Browsers without backdrop-filter get an opaque tinted panel via supports-[backdrop-filter:blur(1px)]:, so the white text never lands on a bright gradient.
## HTML
```html
<section class="tcb-11 relative isolate w-full min-h-svh grid place-items-center overflow-hidden bg-linear-135 from-tcb11-a via-tcb11-b via-55% to-tcb11-c px-5 py-14 font-tcb11-sans text-white selection:bg-white/60 selection:text-tcb11-deep" aria-label="Glassmorphism checkboxes">
  <span aria-hidden="true" class="absolute left-[calc(50%-11rem)] top-[calc(50%-8rem)] -z-10 size-48 rounded-full bg-tcb11-orb1 blur-2xl"></span>
  <span aria-hidden="true" class="absolute left-[calc(50%+3rem)] top-[calc(50%+1rem)] -z-10 size-40 rounded-full bg-tcb11-orb2 blur-2xl"></span>
  <div class="flex w-full max-w-[25rem] flex-col gap-1.5 rounded-3xl border border-white/35 bg-tcb11-solid p-4 shadow-tcb11-panel supports-[backdrop-filter:blur(1px)]:bg-white/15 supports-[backdrop-filter:blur(1px)]:backdrop-blur-xl supports-[backdrop-filter:blur(1px)]:backdrop-saturate-150">
    <label class="group flex min-h-12 cursor-pointer items-center gap-3.5 rounded-xl px-3 transition-colors hover:bg-white/10"><input type="checkbox" class="peer sr-only" checked><span aria-hidden="true" class="grid size-[26px] flex-none place-items-center rounded-lg border-[1.5px] border-white/60 bg-white/20 text-tcb11-deep shadow-tcb11-bevel backdrop-blur-sm transition-colors duration-250 peer-checked:border-white/90 peer-checked:bg-white/70 peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-white motion-reduce:transition-none"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="size-[15px] scale-50 opacity-0 transition duration-200 ease-[cubic-bezier(.2,.9,.3,1.3)] group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="text-[15px] font-medium [text-shadow:0_1px_2px_rgb(40_10_70/0.35)]">Ambient sounds</span></label>
    <label class="group flex min-h-12 cursor-pointer items-center gap-3.5 rounded-xl px-3 transition-colors hover:bg-white/10"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="grid size-[26px] flex-none place-items-center rounded-lg border-[1.5px] border-white/60 bg-white/20 text-tcb11-deep shadow-tcb11-bevel backdrop-blur-sm transition-colors duration-250 peer-checked:border-white/90 peer-checked:bg-white/70 peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-white motion-reduce:transition-none"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="size-[15px] scale-50 opacity-0 transition duration-200 ease-[cubic-bezier(.2,.9,.3,1.3)] group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="text-[15px] font-medium [text-shadow:0_1px_2px_rgb(40_10_70/0.35)]">Auto-brightness</span></label>
    <label class="group flex min-h-12 cursor-pointer items-center gap-3.5 rounded-xl px-3 transition-colors hover:bg-white/10"><input type="checkbox" class="peer sr-only" checked><span aria-hidden="true" class="grid size-[26px] flex-none place-items-center rounded-lg border-[1.5px] border-white/60 bg-white/20 text-tcb11-deep shadow-tcb11-bevel backdrop-blur-sm transition-colors duration-250 peer-checked:border-white/90 peer-checked:bg-white/70 peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-white motion-reduce:transition-none"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="size-[15px] scale-50 opacity-0 transition duration-200 ease-[cubic-bezier(.2,.9,.3,1.3)] group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="text-[15px] font-medium [text-shadow:0_1px_2px_rgb(40_10_70/0.35)]">Reduce transparency</span></label>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tcb11-a: #a55ee8;
  --color-tcb11-a: oklch(0.62 0.2 300);
  --color-tcb11-b: #3aa6d8;
  --color-tcb11-b: oklch(0.66 0.13 230);
  --color-tcb11-c: #f07d4f;
  --color-tcb11-c: oklch(0.7 0.16 45);
  --color-tcb11-orb1: #ff5fa2;
  --color-tcb11-orb1: oklch(0.7 0.2 355);
  --color-tcb11-orb2: #5bf0d0;
  --color-tcb11-orb2: oklch(0.86 0.13 175);
  --color-tcb11-solid: #5b3c9e;
  --color-tcb11-solid: oklch(0.43 0.15 295);
  --color-tcb11-deep: #4a2394;
  --color-tcb11-deep: oklch(0.38 0.17 293);
  --font-tcb11-sans: 'DM Sans', system-ui, sans-serif;
  --shadow-tcb11-panel: 0 20px 50px -24px rgb(30 10 60 / 0.55);
  --shadow-tcb11-bevel: inset 0 1px 2px rgb(255 255 255 / 0.6), inset 0 -2px 4px rgb(80 40 120 / 0.2);
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles. */

.tcb-11 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Glass needs content behind it. The original blurred a smooth gradient, where blur is invisible. Two decorative orbs (aria-hidden, blur-2xl) now sit behind the panel, so the frost reads.

Feature query as a variant. supports-[…]: compiles to @supports. The default is an opaque violet panel; only browsers that can blur get the translucent one.

The box is glass too: translucent white, an inset top highlight, and a violet tick when checked.

Make it yours

  • Tint: change bg-white/15 to bg-white/25 for milkier glass.
  • Stage: edit the three gradient stops in the section's bg-linear-135.
  • Orb motion: add animate-pulse to an orb for a slow breathe.
  • Remove orbs if the glass sits over real imagery.

Gotchas — read before shipping

  • backdrop-filter is expensive on large areas — keep glass panels modest.
  • White-on-gradient text must be checked at the lightest point behind it; the fallback exists for that.
  • Safari still needs -webkit-backdrop-filter; Tailwind emits it for you.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

backdrop-filter: Chrome 76, Safari 9 (prefixed), Firefox 103.

Techniques used in this demo

Utilitiesfirst-class utility or variant

backdrop-filtertw ↗text shadowtw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →