AI CSS Animations

Custom CSS Checkboxes

60 custom CSS checkboxes: animated checkmarks, round, to-do strikethrough, card select, heart and star styles. Each one keeps the real input, so it stays accessible and submits with your form. Click to try them.

Animated Checkmark Checkbox

The go-to animated checkbox: the box floods with your accent and an SVG checkmark draws itself with stroke-dashoffset. Unchecking erases the stroke first, then clears the fill.

animated-check · minimal · tailwind

Pure CSS Custom Checkbox

A custom checkbox with no extra markup: appearance: none turns the input itself into the box, and a clip-path checkmark on ::before springs in. The real input keeps focus, keyboard and forms.

animated-check · minimal

Colored Checkbox with accent-color

The one-line fix: accent-color paints the native checkbox in your brand color, em sizing makes it bigger, and a springy scale on hover and press adds feedback. No custom drawing at all.

native · minimal · tailwind

Round Checkbox

A circular checkbox: border-radius: 50% on an appearance: none input, a fill that floods in, and an L-shaped checkmark that pops with a spring overshoot. Pure CSS, no SVG.

round · animated-check · tailwind

Animated Circle Checkmark Checkbox

The success-style checkmark as a checkbox: a ring traces itself around the circle, the tick draws inside it, and the icon gives a small bump when it lands. Two SVG strokes, no fill.

round · animated-check

CSS Checkmark Checkbox Without SVG

Two pseudo-element strokes draw the tick in order, short leg then long leg, the way a pen would. Unchecking lifts them in reverse. Pure CSS transforms, no SVG and no images.

animated-check · minimal

Morphing Checkbox (Box to Checkmark)

The box itself becomes the checkmark: two borders fade, the other two stretch into an L, and the whole shape rotates 45 degrees with a spring. Unchecking folds the tick back into a square.

animated-check · minimal

Fill From Center Checkbox

A disc of color grows out of the middle of the box until it fills every corner, then the checkmark rises into place. Unchecking drops the tick and shrinks the fill back to a point.

animated-check · minimal

Radial Wipe Checkbox

The fill sweeps around the box like a clock hand, then the tick draws on top. A registered @property lets the conic-gradient angle transition, so unchecking winds it back the other way.

animated-check · minimal

Bounce Checkbox

Checking squashes the box flat, stretches it tall and lets it settle, like a ball landing, while the tick springs out from the middle. Squash and stretch keyframes, anchored at the bottom edge.

animated-check · playful

Material Design Checkbox with Ripple

The Material pattern in plain CSS: a soft halo on hover, a ripple that spreads and fades when you check it, and a tick that draws across the filled box. Box and halo follow Material's proportions.

animated-check · minimal

Neumorphic Checkbox

A soft UI checkbox that sits raised on its own surface and sinks in when checked, while the tick draws in your accent. The outset and inset shadows are listed in both states so they interpolate.

neumorphic · animated-check

3D Push Checkbox

A keycap checkbox that stands on a solid edge. Checking pushes it down into the edge, floods it with the accent and pops the tick; pressing sinks it all the way. One box-shadow and a translate.

3d · animated-check

3D Flip Checkbox

The box is a two-sided card: checking flips it over on the Y axis to reveal a filled back face with the tick, overshooting a little as it lands. Uses backface-visibility and perspective().

3d · animated-check

Neon Glow Checkbox

A neon tube checkbox on its own dark panel: checking flickers the box on like a sign warming up, draws a glowing tick and lights the label. Glow comes from box-shadow and a drop-shadow filter.

animated-check · playful

Hand-Drawn Sketch Checkbox

A wobbly pencil box with a quick scribbled tick that overshoots the corner, like marking a paper form. The tick is one SVG stroke that starts slow and flicks fast, and the box gives a small jolt.

animated-check · playful

Liquid Fill Checkbox

Checking fills the box with liquid: a slowly turning rounded square rises from below, so its surface sloshes as it climbs, then the tick draws in white. Unchecking drains it back out.

animated-check · playful

Line to Checkmark Morph Checkbox

A flat line grows out of the center of the box, then bends at a hinge into a tick with a spring. Unchecking flattens the tick back into a line and shrinks it away. Two bars, only transforms.

animated-check · minimal

Tick and Cross Checkbox

Off shows a red cross and on shows a tick, so both answers are explicit. Checking spins the cross out while the tick spins in with a spring, and the box swaps from a red tint to your accent.

animated-check · minimal

Square to Circle Checkbox

A rounded square that melts into a circle as it fills, with the tick twisting into place a beat later. The corner radius transitions between two percentages, so it morphs smoothly at any size.

round · animated-check · tailwind

Big Checkbox

A large checkbox with a bold tick and a padded label, so the whole row is an easy tap target. Checking gives the box a springy pop while the tick draws. Raise --chk-size to grow it further.

animated-check · minimal

Gradient Checkbox

A gradient ring that floods with the same gradient from one corner when checked, while the label picks up the gradient too. The ring is a masked pseudo-element; the fill is a growing clip-path circle.

animated-check · playful

Sliding Checkmark Checkbox

Everything travels left to right: the fill wipes in from the left edge and the tick slides in behind it; unchecking wipes it out through the right edge. Swapping transform-origin keeps one direction.

animated-check · minimal

Pixel Art Retro Checkbox

An 8-bit checkbox drawn on a 13 by 13 SVG grid with crisp edges and a drop shadow. Checking hops the box, fills it in stepped frames and reveals the pixel tick column by column with steps().

playful · animated-check

Confetti Checkbox

Checking fires a ring of confetti out of the box: eight bits in four colors fly outward, spin and fade while the tick draws. Each bit is a span with an --i index that sets its angle and delay.

playful · animated-check

Stamp Checkmark Checkbox

The tick comes down like a rubber stamp: it drops from twice its size, lands tilted over the edges of the box and the box flinches from the impact. Two keyframes, timed so the flinch hits on contact.

playful · animated-check

Tailwind CSS Checkbox

The Tailwind pattern: an appearance-none input as the box and an SVG sibling that rises and fades in with peer-checked. The CSS tab is the same checkbox written out, a hairline border and all.

tailwind · minimal

Neo-Brutalist Checkbox

A neo-brutalist checkbox: thick ink border, a hard offset shadow and flat color. Checking slams the box into its shadow and punches in a square-capped tick. The ink follows your text color.

3d · animated-check

Outline to Solid Checkbox

The border thickens inward like an iris closing until the box is solid, then the tick drops in with a bounce. The fill is one inset box-shadow whose spread grows past half the box width.

animated-check · minimal

Spinning Checkbox

The box makes a half turn as it fills, overshooting before it squares up, and the tick spins in upright once it lands. Unchecking unwinds it. The box is a pseudo-element, so the label stays put.

animated-check · playful

To-Do Checkbox with Strikethrough

A to-do item that ticks its box, then draws a line through the task from left to right and dims it. Unchecking wipes the line away. The strike is one scaled ::after, so it fits any text length.

todo · animated-check · tailwind

To-Do Task Card Checkbox

A task card that completes in one gesture: a tint sweeps across the row, the round check squashes and bounces, the text slides aside and a Done pill pops in. Every piece reverses on uncheck.

todo · round · animated-check

Checklist with Progress Bar

A setup checklist whose bar fills a third per ticked item and whose counter reads 2 / 3 done. The bar uses :has() to count checked boxes and the counter is a plain CSS counter, no script.

todo · animated-check

Checkbox Card Select

The whole card is the label: selecting it turns the border and icon tile to the accent, adds a soft ring and pops a check badge into the corner. Good for plan features, integrations and settings.

card-select · animated-check · tailwind

Heart Like Checkbox

A heart that pops in filled when checked, with a shrinking ring and eight dots bursting outward, the like animation people know from social apps. It is a real checkbox, so it submits with a form.

icon · playful

Terms and Conditions Checkbox

An I agree checkbox that unlocks the button under it: the lock icon turns into an arrow and the button fills with the accent. Pure CSS with :has(); also set disabled on the button from your form code.

animated-check · minimal · tailwind

Checkbox Filter Chips

A row of tag chips that act as checkboxes for filters. Each chip's plus sign folds into a checkmark as the chip fills with the accent. The two bars only move with transform, so the morph stays smooth.

card-select · animated-check · minimal

Image Checkbox

Photo tiles that select like a gallery app: the picture shrinks inside a tinted frame and a round check badge fills in. The scenes are CSS gradients; swap in your own img or background-image.

card-select · round · animated-check

Star Favorite Checkbox

An outlined star that spins in a fifth of a turn, fills with the accent and throws five sparks from between its points. Unchecking just drains the fill, so the fanfare only plays on a new favorite.

icon · playful

Indeterminate Checkbox Group

A parent row whose box mirrors its children: empty, a dash when some are checked, a check when all are. The dash folds away as the check draws in. Pure CSS: the parent reads them with :has().

animated-check · todo

Checkbox List Group

A bordered list where each row is a checkbox: a checkmark draws in on the right, the row tints and an accent bar grows on its left edge. The settings-screen pattern, with the real inputs kept.

minimal · animated-check · tailwind

Add-on Checkboxes with Live Total

Pricing add-ons that update the total as you tick them. Each checked input adds its --price to a CSS counter, so the sum is live with no script. Rows light up and the price pill fills on select.

card-select · animated-check

Grocery List Scribble Checkbox

A handwritten shopping list: a rough pen tick fills the sketchy box and a wavy scribble crosses the item out. The scribble is an SVG revealed with clip-path, so it stretches to any word.

todo · playful

Bookmark Save Checkbox

A bookmark ribbon that fills from the top and dips like it just dropped onto the page, while the word Save rolls up to Saved. The fill is a clipped copy of the icon, so it pours in cleanly both ways.

icon · minimal

Thumbs Up Like Checkbox

A like pill with a count: the thumb winds back, flicks up and fills, and the number rolls from 41 to 42. The roll is two stacked numbers in a clipped window; swap in your own count on the server.

icon · playful

Emoji Smiley Checkbox

A face drawn with three spans that goes from a flat mouth to a wide grin when checked, fills with the accent, blinks and wiggles. No emoji font needed, so it renders the same on every OS.

icon · playful

Show Password Eye Checkbox

A closed eye with lashes that opens when checked: the upper lid flips up into an arch, the lashes tuck away and the pupil pops in. Pair it with a line of JS that flips the password field's type.

icon · minimal

Notification Bell Checkbox

A bell that rings when you turn notifications on: it swings with a decaying wobble, the clapper lags a beat behind and two sound arcs fade out at its sides. Fills with the accent while checked.

icon · playful

Pushpin Checkbox

A pushpin that lies tipped over until checked, then swings upright, lifts and presses into the page with a small squash and a shadow under its point. Good for pinning notes, chats or rows to the top.

icon · playful

Light Bulb Checkbox

A light bulb that switches on: the glass flickers to full, the filament glows white, a soft halo spreads and five rays fan out from the center. Unchecking dims it straight back to an outline.

icon · playful

Padlock Lock Checkbox

A padlock drawn with two spans: unchecked, the shackle swings open on its left leg; checked, it snaps shut with a small clunk and the body fills with the accent. Good for locking layers or files.

icon · minimal

Sun and Moon Dark Mode Checkbox

A sun whose rays spin inward and vanish as its disc grows into a crescent moon, with two stars blinking on. The crescent is one inset box-shadow sliding across the disc, so there is no mask or SVG.

icon · playful

Mark as Read Envelope Checkbox

A closed envelope with an unread dot. Checking flips the flap open in 3D, lets the letter rise out and clears the dot; unchecking tucks the letter back before the flap closes. Built from five spans.

icon · 3d

Weekday Picker Checkboxes

Seven round day chips for a repeat schedule. Checked days pop into the accent, and neighbors that are both checked join into one pill through a bridge drawn with :has() and the + combinator.

round · card-select

Speaker Mute Checkbox

A speaker icon for a mute setting: checking folds the sound waves back into the cone, outer wave first, then draws an X in two strokes and fills the speaker. Unchecking lets the waves ripple back out.

icon · minimal

Rocket Launch Checkbox

A rocket that rumbles on its pad, lifts off on a flickering flame and hovers while checked, as three smoke puffs roll out below. Unchecking lands it again. Made for ship and deploy tasks.

playful · icon

Cat Paw Checkbox

A ginger paw reaches down from above, presses the box flat and pulls back, leaving a paw print where the checkmark would be. The arm slides inside a clipped window, so it never covers your layout.

playful · animated-check

I'm Not a Robot Checkbox

The verify-you're-human pattern: the box rounds into a spinner, turns twice, then shrinks away as a checkmark draws in and the shield fills. Only the look; real checks need a bot-detection service.

animated-check · playful

Gift Box Checkbox

A wrapped present that squashes, swings its lid open on a hinge and lets a gold star float up out of the box. Fun for rewards and streaks. Unchecking drops the star back in and shuts the lid.

playful · icon

Growing Plant Checkbox

A sprout in a pot that grows when you tick the task: the stem stretches up, two leaves unfurl on a stagger and a flower blooms at the top. A gentle reward for habit trackers and daily to-do lists.

playful · icon · todo

How to use these checkboxes

Open any checkbox, copy the HTML into your form and the CSS into your stylesheet. The real <input type="checkbox"> stays in the page (restyled, never display: none), wrapped in its <label>, so clicking the text, the keyboard and form submission all work.

To change the color, set --chk-color on the checkbox or any ancestor. To change the size, set --chk-size: the box, checkmark and label all scale from it.

Every snippet keeps a visible :focus-visible ring and ships with a prefers-reduced-motion rule that shows the checked state instantly for people who asked their OS for less motion.

Frequently asked questions

How do I style a checkbox with CSS?

For a one-line color change use accent-color. For full control set appearance: none on the input, draw the box and checkmark with borders or pseudo-elements, and style the :checked state.

How do I make a checkbox bigger or change its color?

Set width and height on an appearance: none checkbox, or raise --chk-size on any snippet here, and use your own :checked background or accent-color.

How do I make a round checkbox?

Add border-radius: 50% to a custom appearance: none checkbox. The round entries above also animate the checkmark in.

How do I animate a checkmark in CSS?

Draw the check as an SVG path and animate stroke-dashoffset from its full length to zero when the input is :checked, or rotate and scale an L-shaped border.

Are custom checkboxes accessible?

Yes, if the real input stays in the page, is wrapped by or tied to a label, and keeps a visible focus style. Hiding it with display: none removes it from the keyboard and screen readers.