Live preview Cards
Yoga Flow Card
Yoga session card with pose sequence, duration, and chakra color.
#border CSS effects
3,995 free, pure-CSS effects match the "border" tag. Each is copy-ready and needs no library or build step.
Live preview Cards
YouTube Subscribe Bell Card
YouTube channel subscribe card with bell notification toggle.
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Arrow Lock Checkbox
An arrow rotates a quarter turn and drops into the notch that holds it.
Live preview Checkboxes
Asteroid Rock Toggle
A jagged asteroid spins and lights up when checked.
Live preview Checkboxes
Aurora Borealis Wave
A flowing wave of green and purple aurora lights up when checked.
Live preview Checkboxes
Battery Bar Checkbox
Three cells light up left to right until the battery reads full.
Live preview Checkboxes
Black Hole Swirl
A swirling vortex with a dark center draws matter inward when checked.
Live preview Checkboxes
Lightning Bolt Zap
An SVG lightning bolt that zaps in with an electric yellow glow when toggled on.
Live preview Checkboxes
Dashed Border March
A dashed border that marches around the box when checked.
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Bubble Pop Checkbox
A soap bubble swells past its limit, bursts, and leaves the tick in its place.
Live preview Checkboxes
Circle Burst Confetti
On check, a burst of confetti particles flies outward from the checkbox center.
Live preview Checkboxes
Candy Stripe Fill
A checkbox filled with animated diagonal candy stripes when checked.
Live preview Checkboxes
Clamp Grip Checkbox
Two jaws close on the block in the middle and squeeze it slightly flat.
Live preview Checkboxes
Amber Glow Color Toggle
A color swatch that fills with amber glow when checked.
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Honeycomb Color Toggle
A color swatch that fills with honeycomb gold when checked.
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Mustard Color Toggle
A color swatch that fills with mustard yellow when checked.
Live preview Checkboxes
Live preview Checkboxes
Rose Pink Color Toggle
A color swatch that fills with rose pink when checked.
Live preview Checkboxes
Royal Blue Color Toggle
A color swatch that fills with royal blue when checked.
Live preview Checkboxes
Live preview Checkboxes
Saffron Color Toggle
A color swatch that fills with saffron orange when checked.
Live preview Checkboxes
Live preview Checkboxes
Sienna Color Toggle
A color swatch that fills with sienna brown when checked.
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Container Query Checkbox
Below a certain width the helper text hides and the control keeps only its label.
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Crystal Prism Toggle
A faceted crystal glows with prismatic light when checked.
Live preview Checkboxes
Dog Ear Checkbox
The bottom-right corner of the page curls up to mark it as read.
Live preview Checkboxes
Domino Tip Checkbox
The upright tile tips over onto its side and settles with a small bounce.
Live preview Checkboxes
Dot Indicator
A radio-style dot scales into the center of an outlined circle with a pink glow when checked.
Live preview Checkboxes
Double Tick Mark
Two checkmarks draw in sequence — a WhatsApp-style double-tick when checked.
Live preview Checkboxes
Live preview Checkboxes
Elevator Doors Checkbox
Two brushed metal doors part in the middle to reveal the lit car behind.
Live preview Checkboxes
Blinking Eye Checkbox
An eyelid slides down over the iris, closing the eye when the box is ticked.
Live preview Checkboxes
Fill From Bottom
A square checkbox where a colored block fills upward from the bottom when checked.
Live preview Checkboxes
Diagonal Fill
A square that fills diagonally with a sweeping gradient when checked.
Live preview Checkboxes
Fill From Left
A square that fills with color from the left edge when checked.
Live preview Checkboxes
Live preview Checkboxes
Fill From Right
A square that fills with color from the right edge when checked.
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
3D Flip Card Check
A checkbox that flips in 3D to reveal a green check face when toggled on.
Live preview Checkboxes
Card Flip Reveal
A card-style flip that reveals a checkmark face when checked.
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Glassmorphism Amber
A frosted glass effect with amber tint and checkmark when checked.
Live preview Checkboxes
Glassmorphism Blue
A frosted glass effect with blue tint and checkmark when checked.
Live preview Checkboxes
Glassmorphism Violet
A frosted glass effect with violet tint and checkmark when checked.
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Animated Gradient Fill
A square filled with an animated gradient background and a white checkmark when checked.
Live preview Checkboxes
Has-Selector Option Row
The :has() selector lets the checked input restyle its entire surrounding card.
Live preview Checkboxes
Hematite Metallic Stone
A silver metallic hematite stone reflects light when checked.
Live preview Checkboxes
Hexagon Fill
A hexagon outline that fills with an amber gradient and reveals a checkmark when checked.
Live preview Checkboxes
Live preview Checkboxes
Ink Splat Checkbox
A drop of ink bursts out of the box and settles into a filled square when ticked.
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Jupiter Striped Giant
A banded gas giant with a great red spot appears when checked.
Live preview Checkboxes
Key Turn Checkbox
A key rotates a quarter turn in the barrel and the shackle springs shut.
Live preview Checkboxes
Lapis Lazuli Stone
Deep blue lapis lazuli with golden flecks shimmers when checked.
Live preview Checkboxes
Flip Lid Checkbox
A hinged lid swings up on its top edge and uncovers the tick underneath.
Live preview Checkboxes
Liquid Drop Checkbox
A droplet falls from above, lands in the box and floods it with colour.
Live preview Checkboxes
Magnet Snap Checkbox
The tick flies in from the side and snaps hard against the box wall.
Live preview Checkboxes
Malachite Banded Stone
A green banded malachite stone shows rings when checked.
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Mercury Cratered Planet
A small gray cratered Mercury rotates into view when checked.