Most popular CSS effects

Live preview Checkboxes

Letter M Toggle

Letter M bounces in purple when checked.

#transform #border #lever

Live preview Checkboxes

Lever Pull Checkbox

A mechanical lever swings from the off notch down into the on notch.

Live preview Checkboxes

Locust Toggle

A locust pulses brown when checked.

Live preview Checkboxes

Long Drum Toggle

A long drum shakes in orange when checked.

#animation #shadow #transform

Live preview Checkboxes

Love Eyes Reveal

A plain heart-eyes emoji reveals with a pulsing pink glow and scale when checked.

Live preview Checkboxes

Mangosteen Toggle

A mangosteen pulses purple when checked.

Live preview Checkboxes

Mayfly Toggle

A mayfly flips white when checked.

Live preview Checkboxes

Medal Spin Reveal

A medal emoji spins 360 degrees on its Y-axis and shines when awarded.

#animation #3d #shadow

Live preview Checkboxes

Milkshake Toggle

A milkshake shakes pink when checked.

#border #transform #rotate

Live preview Checkboxes

Minimal Line Check

A clean, borderless minimal check whose mark fades in softly when toggled on.

Live preview Checkboxes

Mosquito Buzz Toggle

A mosquito shakes with a gray glow when checked.

Live preview Checkboxes

Motorcycle Toggle

A motorcycle bounces in with cool glow when checked.

Live preview Checkboxes

Number 1 Toggle

Number 1 scales up blue when checked.

Live preview Checkboxes

Ocean Wave Toggle

An ocean wave glows blue when checked.

Live preview Checkboxes

Octopus Ink Toggle

An octopus wiggles with a magenta glow when checked.

Live preview Checkboxes

Palm Tropical Toggle

A palm tree sways green when checked.

Live preview Checkboxes

Parrot Squawk Toggle

A parrot glows with a rainbow hue when checked.

#shadow #transform #filter

Live preview Checkboxes

Paw Print Toggle

A grayscale paw-print emoji fills in and pads down with a warm glow when toggled on.

Live preview Checkboxes

Pelican Toggle

A pelican glows white when checked.

Live preview Checkboxes

Pepper Spice Toggle

A hot pepper flames red when checked.

Live preview Checkboxes

Phone Call Toggle

A phone shakes green when checked.

Live preview Checkboxes

Pina Colada Toggle

A pina colada shakes yellow when checked.

Live preview Checkboxes

Pintail Toggle

A pintail shakes brown when checked.

Live preview Checkboxes

Plug Power Toggle

A plug glows yellow when checked.

Live preview Checkboxes

Plum Toggle

A plum flips purple when checked.

Live preview Checkboxes

Pool Toggle

A pool ball pulses purple when checked.

Live preview Checkboxes

Quarter Note Toggle

A quarter note symbol fades in blue when checked.

Live preview Checkboxes

Quartz Cluster Toggle

A cluster of quartz points lights up when checked.

#gradient #border

Live preview Checkboxes

Rabbit Hop Toggle

A rabbit hops with a pink glow when checked.

Live preview Checkboxes

Raccoon Mask Toggle

A raccoon shakes with a gray glow when checked.

Live preview Checkboxes

Ramen Slurp Toggle

A ramen bowl steams to life with a warm glow when checked.

Live preview Checkboxes

Raven Toggle

A raven fades in black when checked.

Live preview Checkboxes

Rugby Ball Toggle

A rugby ball spins brown when checked.

Live preview Checkboxes

Sake Pour Toggle

A sake bottle glows warm when checked.

#animation #clip-path #gradient

Live preview Checkboxes

Scanline Checkbox

A bright scan line sweeps down the box and leaves solid colour behind it.

Live preview Checkboxes

Scissors Cut Toggle

Scissors snip with a gray glow when checked.

Live preview Checkboxes

Shark Bite Toggle

A shark shakes with a steel glow when checked.

Live preview Checkboxes

Shine Sparkle Toggle

Sparkles shine with a gold glow when checked.

Live preview Checkboxes

Smoothie Toggle

A smoothie bounces pink on check.

Live preview Checkboxes

Speaker Loud Toggle

A speaker glows cyan when checked.

Live preview Checkboxes

Stadium Toggle

A stadium bounces in green when checked.

Live preview Checkboxes

Store Toggle

A convenience store fades in pink when checked.

Live preview Checkboxes

Studio Mic Toggle

A studio microphone scales up gray when checked.

#animation #shadow #transform

Live preview Checkboxes

Sun Brighten Toggle

A dim sun emoji brightens and slowly rotates with a warm yellow glow when checked.

Live preview Checkboxes

Sunset Dusk Toggle

A sunset glows warm when checked.

Live preview Checkboxes

Surfing Toggle

A surfer shakes blue when checked.

Live preview Checkboxes

Sushi Fresh Toggle

A sushi roll brightens with a pink glow when checked.

Live preview Checkboxes

Minus Math Symbol Toggle

A minus math symbol that turns red when checked.

Live preview Checkboxes

Omega Symbol Toggle

The Greek omega letter fades violet when checked.

#shadow #filter

Live preview Checkboxes

Plus Symbol Toggle

A plus math symbol that turns green when checked.

Live preview Checkboxes

Theta Symbol Toggle

The Greek theta letter scales pink when checked.

Live preview Checkboxes

Tanager Toggle

A tanager spins red when checked.

#gradient #transform #shadow

Live preview Checkboxes

Glass Texture Toggle

A frosted glass texture with blue tint when checked.

Live preview Checkboxes

Storm Crash Toggle

A thunderstorm shakes yellow when checked.

Live preview Checkboxes

Ticket Admit Toggle

A ticket glows yellow when checked.

Live preview Checkboxes

Tiger Stripes Toggle

A tiger glows orange when checked.

Live preview Checkboxes

Titmouse Toggle

A titmouse fades in gray when checked.

Live preview Checkboxes

Tools Build Toggle

Tools glow amber when checked.

Live preview Checkboxes

Tornado Spin Toggle

A tornado spins gray when checked.

Live preview Checkboxes

Trumpet Toggle

A trumpet bounces in gold when checked.

Live preview Checkboxes

Turnstone Toggle

A turnstone shakes orange when checked.

Live preview Checkboxes

Twinkle Star Toggle

A star twinkles gold when checked.

Live preview Checkboxes

Willet Toggle

A willet flips gray when checked.

Live preview Checkboxes

Window View Toggle

A window glows blue when checked.

Live preview Checkboxes

Woodpecker Toggle

A woodpecker shakes red when checked.

Live preview Checkboxes

Zap Energy Toggle

A lightning bolt flickers yellow when checked.

Frost Background Input

Cold frost-tinted background with crystalline overlay.

Glowing Background Input

Background glows brightly on focus, color seeping outward.

Gradient Background Input

Input with an animated gradient background that shifts on focus.

Mesh Background Input

Input with a vibrant mesh gradient background.

Sunken Input

Deeply sunken input that appears pressed into surface.

Full Border Draw Input

Border draws itself around the input clockwise when focused.

#border

#animation #gradient #border

Fire Border Input

Animated fire-effect border using layered gradients.

Ice Border Input

Icy frosted border with crystalline shimmer.

Inset Border Input

Sunken inset border that pops out on focus.

Multi Color Border Input

Each side of the border has a different animated color.

#gradient #border

#animation #gradient #border

Rainbow Border Input

Border continuously cycles through rainbow hues.

Retro Terminal Border

Old terminal-style input with chunky inset border.

3D Dropdown

Dropdown with 3D depth shadow on focus.

Action Button Dropdown

Primary action button with dropdown menu of secondary actions.

#hover #shadow #border

#hover #transform #shadow

Date Range Dropdown

Date range picker dropdown with quick preset options.

#hover #transform #border

Emoji Picker Dropdown

Dropdown with emoji reactions as options.

Fluent Dropdown

Microsoft Fluent design dropdown with subtle motion.

#hover #shadow #border

iOS Dropdown

iOS-inspired dropdown with rounded pill shape.

Searchable Dropdown

Dropdown with search input style appearance.

Tags Input Dropdown

Dropdown with tag input for adding multiple values.

#hover #shadow #border

Timezone Dropdown

Timezone picker with code formatting and clock icon.

#transform #border #filter

Blur Floating Label

Label starts blurred then sharpens as it lifts to the top.

Curve Floating Label

Label arcs upward in a curved path using transform-origin trick.

Cyan Accent Floating Label

Crisp cyan-themed floating label input.

Emerald Accent Floating Label

Calm emerald-themed floating label for signup forms.

Floating Label Fade

Label fades and floats up smoothly using opacity transitions.

#border

Floating Label Slide Up

Classic floating label that slides up when the input is focused or filled.

Violet Accent Floating Label

Violet-themed floating label input with soft glow.

Animating Icon Input

Input whose left icon bounces when input is focused.