29 Tailwind CSS Checkboxes
27 / 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

Confetti Checkbox Animation in Tailwind CSS — Pure CSS Particle Burst

Eight confetti flakes burst from the box on check — squares and dots, each flying to its own vector via per-particle custom properties ([--tx:-16px] [--ty:-14px] [--rot:120deg]) read by one shared animate-tcb27-pop keyframe. The tick springs in behind the burst. Zero JavaScript.

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-27 w-full min-h-svh grid place-items-center bg-tcb27-bg px-5 py-14 font-tcb27-sans text-tcb27-ink selection:bg-tcb27-acc selection:text-white" aria-label="Confetti burst checkboxes">
  <div class="w-full max-w-[25rem] rounded-2xl border border-tcb27-line bg-white px-4 py-2.5">
    <label class="group flex min-h-15 cursor-pointer items-center gap-4 px-2"><input type="checkbox" class="peer sr-only" checked><span aria-hidden="true" class="relative grid size-[26px] flex-none place-items-center rounded-lg border-2 border-tcb27-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb27-acc peer-checked:bg-tcb27-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb27-acc"><span class="pointer-events-none absolute inset-0 motion-reduce:hidden"><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c1 [--tx:-16px] [--ty:-14px] [--rot:120deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-full bg-tcb27-c2 [--tx:15px] [--ty:-16px] [--rot:-90deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c3 [--tx:-18px] [--ty:10px] [--rot:60deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-full bg-tcb27-c4 [--tx:17px] [--ty:12px] [--rot:-140deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c5 [--tx:0px] [--ty:-21px] [--rot:200deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c6 [--tx:2px] [--ty:19px] [--rot:-40deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-full bg-tcb27-c4 [--tx:-21px] [--ty:-2px] [--rot:90deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c1 [--tx:21px] [--ty:-3px] [--rot:-60deg] group-has-checked:animate-tcb27-pop"></i></span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="relative 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">Finish onboarding</span></label>
    <label class="group flex min-h-15 cursor-pointer items-center gap-4 px-2"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="relative grid size-[26px] flex-none place-items-center rounded-lg border-2 border-tcb27-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb27-acc peer-checked:bg-tcb27-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb27-acc"><span class="pointer-events-none absolute inset-0 motion-reduce:hidden"><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c1 [--tx:-16px] [--ty:-14px] [--rot:120deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-full bg-tcb27-c2 [--tx:15px] [--ty:-16px] [--rot:-90deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c3 [--tx:-18px] [--ty:10px] [--rot:60deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-full bg-tcb27-c4 [--tx:17px] [--ty:12px] [--rot:-140deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c5 [--tx:0px] [--ty:-21px] [--rot:200deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c6 [--tx:2px] [--ty:19px] [--rot:-40deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-full bg-tcb27-c4 [--tx:-21px] [--ty:-2px] [--rot:90deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c1 [--tx:21px] [--ty:-3px] [--rot:-60deg] group-has-checked:animate-tcb27-pop"></i></span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="relative 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">Claim your reward</span></label>
    <label class="group flex min-h-15 cursor-pointer items-center gap-4 px-2"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="relative grid size-[26px] flex-none place-items-center rounded-lg border-2 border-tcb27-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb27-acc peer-checked:bg-tcb27-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb27-acc"><span class="pointer-events-none absolute inset-0 motion-reduce:hidden"><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c1 [--tx:-16px] [--ty:-14px] [--rot:120deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-full bg-tcb27-c2 [--tx:15px] [--ty:-16px] [--rot:-90deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c3 [--tx:-18px] [--ty:10px] [--rot:60deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-full bg-tcb27-c4 [--tx:17px] [--ty:12px] [--rot:-140deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c5 [--tx:0px] [--ty:-21px] [--rot:200deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c6 [--tx:2px] [--ty:19px] [--rot:-40deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-full bg-tcb27-c4 [--tx:-21px] [--ty:-2px] [--rot:90deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c1 [--tx:21px] [--ty:-3px] [--rot:-60deg] group-has-checked:animate-tcb27-pop"></i></span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="relative 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">Hit the goal</span></label>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tcb27-bg: #f6f4fb;
  --color-tcb27-bg: oklch(0.97 0.008 300);
  --color-tcb27-ink: #2f2a3d;
  --color-tcb27-ink: oklch(0.29 0.03 295);
  --color-tcb27-line: #e9e5f3;
  --color-tcb27-line: oklch(0.93 0.012 295);
  --color-tcb27-box: #a29bb8;
  --color-tcb27-box: oklch(0.71 0.04 295);
  --color-tcb27-acc: #8a3fc4;
  --color-tcb27-acc: oklch(0.52 0.19 305);
  --color-tcb27-c1: #ff5d73;
  --color-tcb27-c1: oklch(0.68 0.2 15);
  --color-tcb27-c2: #ffd23f;
  --color-tcb27-c2: oklch(0.88 0.17 90);
  --color-tcb27-c3: #3ddc97;
  --color-tcb27-c3: oklch(0.8 0.16 160);
  --color-tcb27-c4: #4d7fff;
  --color-tcb27-c4: oklch(0.62 0.2 265);
  --color-tcb27-c5: #c04cff;
  --color-tcb27-c5: oklch(0.64 0.26 310);
  --color-tcb27-c6: #ff9a3d;
  --color-tcb27-c6: oklch(0.77 0.16 55);
  --font-tcb27-sans: 'Bricolage Grotesque', system-ui, sans-serif;
  --animate-tcb27-pop: tcb27-pop 0.6s ease-out;

  @keyframes tcb27-pop {
    0% {
      translate: -50% -50%;
      scale: 0;
      rotate: 0deg;
      opacity: 0;
    }

    15% {
      scale: 1;
      opacity: 1;
    }

    100% {
      translate: calc(-50% + var(--tx)) calc(-50% + var(--ty));
      scale: 0.4;
      rotate: var(--rot);
      opacity: 0;
    }
  }
}
/* 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-27 {
  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-tcb27-bg: #f6f4fb;
  --color-tcb27-bg: oklch(0.97 0.008 300);
  --color-tcb27-ink: #2f2a3d;
  --color-tcb27-ink: oklch(0.29 0.03 295);
  --color-tcb27-line: #e9e5f3;
  --color-tcb27-line: oklch(0.93 0.012 295);
  --color-tcb27-box: #a29bb8;
  --color-tcb27-box: oklch(0.71 0.04 295);
  --color-tcb27-acc: #8a3fc4;
  --color-tcb27-acc: oklch(0.52 0.19 305);
  --color-tcb27-c1: #ff5d73;
  --color-tcb27-c1: oklch(0.68 0.2 15);
  --color-tcb27-c2: #ffd23f;
  --color-tcb27-c2: oklch(0.88 0.17 90);
  --color-tcb27-c3: #3ddc97;
  --color-tcb27-c3: oklch(0.8 0.16 160);
  --color-tcb27-c4: #4d7fff;
  --color-tcb27-c4: oklch(0.62 0.2 265);
  --color-tcb27-c5: #c04cff;
  --color-tcb27-c5: oklch(0.64 0.26 310);
  --color-tcb27-c6: #ff9a3d;
  --color-tcb27-c6: oklch(0.77 0.16 55);
  --font-tcb27-sans: 'Bricolage Grotesque', system-ui, sans-serif;
  --animate-tcb27-pop: tcb27-pop 0.6s ease-out;

  @keyframes tcb27-pop {
    0% {
      translate: -50% -50%;
      scale: 0;
      rotate: 0deg;
      opacity: 0;
    }

    15% {
      scale: 1;
      opacity: 1;
    }

    100% {
      translate: calc(-50% + var(--tx)) calc(-50% + var(--ty));
      scale: 0.4;
      rotate: var(--rot);
      opacity: 0;
    }
  }
}
/* 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-27 {
  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=Bricolage+Grotesque:opsz,wght@12..96,400..800&display=swap">

What changed in the port

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

  • Inline style="--tx:…;background:#…" on each flake became arbitrary-property utilities and palette tokens — the markup no longer carries raw colours.
  • The transform: translate() scale() rotate() keyframe became three individual properties, matching v4's transform model.
  • UI upgrade from the CSS original: eight flakes (was six) in two shapes, squares and dots, so the burst reads as confetti rather than a ring of squares.
  • UI upgrade: the empty border rose from #c9c2dd (1.7:1) to 3:1 and rows are 60px tall.
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: Confetti Checkbox Animation in Tailwind CSS — Pure CSS Particle Burst
Source: https://codefronts.com/components/tailwind-css-checkboxes/confetti-checkbox-animation-tailwind/

Eight confetti flakes burst from the box on check — squares and dots, each flying to its own vector via per-particle custom properties ([--tx:-16px] [--ty:-14px] [--rot:120deg]) read by one shared animate-tcb27-pop keyframe. The tick springs in behind the burst. Zero JavaScript.
## HTML
```html
<section class="tcb-27 w-full min-h-svh grid place-items-center bg-tcb27-bg px-5 py-14 font-tcb27-sans text-tcb27-ink selection:bg-tcb27-acc selection:text-white" aria-label="Confetti burst checkboxes">
  <div class="w-full max-w-[25rem] rounded-2xl border border-tcb27-line bg-white px-4 py-2.5">
    <label class="group flex min-h-15 cursor-pointer items-center gap-4 px-2"><input type="checkbox" class="peer sr-only" checked><span aria-hidden="true" class="relative grid size-[26px] flex-none place-items-center rounded-lg border-2 border-tcb27-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb27-acc peer-checked:bg-tcb27-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb27-acc"><span class="pointer-events-none absolute inset-0 motion-reduce:hidden"><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c1 [--tx:-16px] [--ty:-14px] [--rot:120deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-full bg-tcb27-c2 [--tx:15px] [--ty:-16px] [--rot:-90deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c3 [--tx:-18px] [--ty:10px] [--rot:60deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-full bg-tcb27-c4 [--tx:17px] [--ty:12px] [--rot:-140deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c5 [--tx:0px] [--ty:-21px] [--rot:200deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c6 [--tx:2px] [--ty:19px] [--rot:-40deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-full bg-tcb27-c4 [--tx:-21px] [--ty:-2px] [--rot:90deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c1 [--tx:21px] [--ty:-3px] [--rot:-60deg] group-has-checked:animate-tcb27-pop"></i></span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="relative 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">Finish onboarding</span></label>
    <label class="group flex min-h-15 cursor-pointer items-center gap-4 px-2"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="relative grid size-[26px] flex-none place-items-center rounded-lg border-2 border-tcb27-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb27-acc peer-checked:bg-tcb27-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb27-acc"><span class="pointer-events-none absolute inset-0 motion-reduce:hidden"><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c1 [--tx:-16px] [--ty:-14px] [--rot:120deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-full bg-tcb27-c2 [--tx:15px] [--ty:-16px] [--rot:-90deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c3 [--tx:-18px] [--ty:10px] [--rot:60deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-full bg-tcb27-c4 [--tx:17px] [--ty:12px] [--rot:-140deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c5 [--tx:0px] [--ty:-21px] [--rot:200deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c6 [--tx:2px] [--ty:19px] [--rot:-40deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-full bg-tcb27-c4 [--tx:-21px] [--ty:-2px] [--rot:90deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c1 [--tx:21px] [--ty:-3px] [--rot:-60deg] group-has-checked:animate-tcb27-pop"></i></span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="relative 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">Claim your reward</span></label>
    <label class="group flex min-h-15 cursor-pointer items-center gap-4 px-2"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="relative grid size-[26px] flex-none place-items-center rounded-lg border-2 border-tcb27-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb27-acc peer-checked:bg-tcb27-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb27-acc"><span class="pointer-events-none absolute inset-0 motion-reduce:hidden"><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c1 [--tx:-16px] [--ty:-14px] [--rot:120deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-full bg-tcb27-c2 [--tx:15px] [--ty:-16px] [--rot:-90deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c3 [--tx:-18px] [--ty:10px] [--rot:60deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-full bg-tcb27-c4 [--tx:17px] [--ty:12px] [--rot:-140deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c5 [--tx:0px] [--ty:-21px] [--rot:200deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c6 [--tx:2px] [--ty:19px] [--rot:-40deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-full bg-tcb27-c4 [--tx:-21px] [--ty:-2px] [--rot:90deg] group-has-checked:animate-tcb27-pop"></i><i class="absolute left-1/2 top-1/2 size-1.5 -translate-1/2 scale-0 opacity-0 rounded-[1px] bg-tcb27-c1 [--tx:21px] [--ty:-3px] [--rot:-60deg] group-has-checked:animate-tcb27-pop"></i></span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="relative 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">Hit the goal</span></label>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tcb27-bg: #f6f4fb;
  --color-tcb27-bg: oklch(0.97 0.008 300);
  --color-tcb27-ink: #2f2a3d;
  --color-tcb27-ink: oklch(0.29 0.03 295);
  --color-tcb27-line: #e9e5f3;
  --color-tcb27-line: oklch(0.93 0.012 295);
  --color-tcb27-box: #a29bb8;
  --color-tcb27-box: oklch(0.71 0.04 295);
  --color-tcb27-acc: #8a3fc4;
  --color-tcb27-acc: oklch(0.52 0.19 305);
  --color-tcb27-c1: #ff5d73;
  --color-tcb27-c1: oklch(0.68 0.2 15);
  --color-tcb27-c2: #ffd23f;
  --color-tcb27-c2: oklch(0.88 0.17 90);
  --color-tcb27-c3: #3ddc97;
  --color-tcb27-c3: oklch(0.8 0.16 160);
  --color-tcb27-c4: #4d7fff;
  --color-tcb27-c4: oklch(0.62 0.2 265);
  --color-tcb27-c5: #c04cff;
  --color-tcb27-c5: oklch(0.64 0.26 310);
  --color-tcb27-c6: #ff9a3d;
  --color-tcb27-c6: oklch(0.77 0.16 55);
  --font-tcb27-sans: 'Bricolage Grotesque', system-ui, sans-serif;
  --animate-tcb27-pop: tcb27-pop 0.6s ease-out;

  @keyframes tcb27-pop {
    0% {
      translate: -50% -50%;
      scale: 0;
      rotate: 0deg;
      opacity: 0;
    }

    15% {
      scale: 1;
      opacity: 1;
    }

    100% {
      translate: calc(-50% + var(--tx)) calc(-50% + var(--ty));
      scale: 0.4;
      rotate: var(--rot);
      opacity: 0;
    }
  }
}
/* 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-27 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Variables in keyframes. Keyframes can't take arguments, but they can read custom properties resolved on the animating element. Each flake sets its own --tx/--ty/--rot with arbitrary-property utilities; the single keyframe reads them.

v4 transform properties. The keyframe animates translate, scale and rotate separately — no transform string to keep in sync with utilities.

Overflow visible. The box must not clip, so flakes can fly past its edges.

Make it yours

  • Distance: scale every --tx/--ty pair.
  • Palette: edit --color-tcb27-c1…c6.
  • Streamers: h-1 w-2.5 flakes read as ribbons.
  • Longer fall: add a gravity step at 60% with a larger --ty.

Gotchas — read before shipping

  • Initially-checked boxes burst on page load — remove checked for silent defaults.
  • The burst doesn't replay on re-check within the same frame; toggling off and on restarts it.
  • Keep flakes pointer-events-none so they never steal clicks.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Custom properties in keyframes and individual transform properties: Chrome 104 / Safari 14.1 / Firefox 72.

Techniques used in this demo

Theme tokensset in @theme, used by a utility

custom propertiestw ↗

Plain CSSno Tailwind surface

@keyframestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →