Most popular CSS effects

#clip-path #transform #border

Live preview Checkboxes

Hourglass Checkbox

The glass rotates half a turn and the sand settles into the lower bulb.

Live preview Checkboxes

Pulsar Radio Beams

Concentric radio waves pulse outward when this star is checked.

#animation #border #transform

Live preview Checkboxes

Ripple Burst Check

Toggling on triggers an expanding ripple ring around the checkbox.

Live preview Checkboxes

Silverfish Toggle

A silverfish spins gray when checked.

#animation #shadow #border

Live preview Checkboxes

Sparkle Twinkle

A four-pointed sparkle that twinkles in with a magenta glow and slow spin when checked.

Live preview Checkboxes

Psi Symbol Toggle

The Greek psi letter slides in blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Tarot Card Reveal

A mystical tarot card flips to reveal its face when checked.

#gradient #transform #border

Live preview Checkboxes

Pickup Truck Toggle

A pickup truck bounces in orange when checked.

Live preview Checkboxes

Wifi Signal Toggle

An SVG wifi icon lights up in cyan with a soft glow when the device goes online.

#shadow #border #filter

Frosted Glass Input

Heavy frost effect with crystalline texture overlay.

#shadow #border #filter

Glassmorphism Input

Frosted glass input with backdrop blur and translucent border.

#shadow #border #filter

#gradient #shadow #border

Neon Background Input

Dark input with neon glow background on focus.

3D Border Input

Skeuomorphic 3D raised border that depresses on focus.

Dashed Border Input

Input with a dashed border that solidifies on focus.

Glow Accent Dropdown

Dropdown with soft glow accent on entire control.

Popup Style Dropdown

Dropdown that opens a popup panel with detailed options.

#animation #transform #border

Color Shift Floating Label

Label transitions through multiple hues when input is active.

iOS Style Floating Label

Clean iOS-style input with rounded corners and subtle floating label.

Letter Spacing Floating Label

Label expands its letter spacing as it lifts up.

#transform #border

Pill Floating Label

Rounded pill input whose label slides into a small floating chip.

Rotate Floating Label

Label rotates 90 degrees then settles above the input.

Scale Down Floating Label

Label shrinks to the corner with a smooth scale-down motion.

#transform #border

Both Icons Input

Input with icons on both left and right sides.

Circle Icon Input

Input with circular icon container on the left.

Flip Icon Input

Input whose icon flips 180 degrees on focus.

Invalid Icon Input

Input with a red X icon that appears when invalid.

Retro Terminal OTP

Old terminal-style OTP with green phosphor text.

Checkmark Radio

Radio that displays an animated checkmark inside the circle when picked.

#transform #border

Glass Search Bar

Frosted glass search bar with translucent background.

Minimal Slider

Ultra-minimal slider with thin track and small thumb.

#gradient #shadow #border

Skeuomorphic 3D Input

Realistic 3D input with pressed-in appearance and bevels.

Success State Input

Input with full success state — green border, check, and label color.

#hover #animation #gradient

Border Gradient Flow

Animated gradient border flows on hover.

#hover #border #transform

Color Invert Pill

Pill swaps its background and text colors instantly on hover.

Jade Stone

Jade green stone tint on hover.

#hover #gradient

Sage Soft

Soft sage green tint on hover.

#hover #gradient

Contrast Punch

Contrast spikes for a punchy look on hover.

#hover #gradient #filter

#hover #animation #transform

Fireflies Glow

Fireflies blink and float on hover.

#hover #animation #shadow

Flash Edges

Edges flash bright white on hover.

Flip 3D Page

Page-turn 3D flip on hover.

#hover #animation #border

Dashes Crawl Frame

Dashed border marches around the element on hover.

Inset Bevel Frame

Inset beveled frame creates depth on hover.

#hover #animation #gradient

Glitter Shimmer

Glitter shimmers across surface on hover.

Icon Jump Link

The arrow leaps forward and the label shifts slightly to follow it.

Pixelate In

Pixelate snap-in on hover.

#hover #filter

Rotate 3D Flip

Single 3D flip on hover.

#hover #transform #3d

Slide Random Reveal

Random-direction slide reveal on hover.

Squash Pancake

Squashes flat as pancake on hover.

#hover #animation #transform

Pop Letter

Letters pop up sequentially on hover.

Soft Shadow Text

Soft blurred shadow on text on hover.

#hover #shadow

Topspin

Element topspins forward on hover.

#hover #transform #3d

Tritone Forest

Earthy forest tritone gradient on hover.

#hover #gradient #shadow

Typewriter Reveal

Text types out character by character on hover.

#hover #animation

Warm Overlay

Warm orange overlay washes in on hover.

#hover #gradient

Wipe Down

New color wipes down from top on hover.

3D Zoom Tilt

3D zoom tilt transform on hover.

Live preview Loaders

Actuator

Linear actuator extending arm.

#animation #gradient

Live preview Loaders

Axe Chop

Axe chopping down into a wooden log repeatedly.

Live preview Loaders

Banner Wave

Banner waving in wind.

Live preview Loaders

Barbell Press

Barbell being pressed up.

#animation #gradient

Live preview Loaders

Baseball Pitch

Baseball stitching spinning as it flies past home plate.

Live preview Loaders

Blender Blade

Blender jar with whirring blades at the bottom.

Live preview Loaders

Caliper Measure

Digital caliper jaws opening and closing to measure.

#animation #gradient

Live preview Loaders

Camera Shutter

Camera shutter opening and closing.

#animation #transform

Live preview Loaders

Camshaft

Camshaft with egg-shaped lobes.

Live preview Loaders

Candle Clock

Candle burning down as time passes.

Live preview Loaders

Candle Flame

Candle flame flickering.

Live preview Loaders

Cannon Fire

Cannon with periodic fire burst.

Live preview Loaders

Card Shuffle

Playing cards fanning out and shuffling back together.

Live preview Loaders

Constellation

Stars connecting to form a constellation.

Live preview Loaders

Dynamo

Dynamo generating spark.

Live preview Loaders

Ember Glow

Hot embers glowing intensely.

Live preview Loaders

Fax Feed

Paper scrolling through a fax machine slot.

#animation #gradient #border

Live preview Loaders

Flash Flood

Flash flood water rising rapidly.

Live preview Loaders

Flip Card

A gradient card flipping 180 degrees back and forth on its vertical axis.

#gradient #animation #3d

Live preview Loaders

Flute

Flute with finger keys pressing in a melody pattern.

Live preview Loaders

Game Boy

Classic handheld Game Boy with a flickering screen.

Live preview Loaders

Helicopter Blade

Helicopter rotor blades spinning above the cockpit.

Live preview Loaders

Ice Cream Melt

Ice cream melting down cone.

Live preview Loaders

Icicle Drip

Icicle dripping water droplets on a winter day.

#animation #transform #border

Live preview Loaders

Loop Roll

Loop shape rolling end over end.

Live preview Loaders

Microwave Turntable

Microwave glass plate rotating with a glowing interior.

Live preview Loaders

Morph Blob Loader

A gradient blob melts between organic border-radius shapes while it rotates.

Live preview Loaders

Pilgrim Hat

Pilgrim hat with shiny buckle.

Live preview Loaders

Popcorn Popper

Popcorn kernels popping.

#animation #shadow #filter

Live preview Loaders

Rune Glow

Magical rune glowing with pulse.

Live preview Loaders

Satellite Dish

Satellite dish emitting signal waves.

Live preview Loaders

Spark Fly

Sparks flying upward.

#animation #border #transform

Live preview Loaders

Stopwatch Tick

A stopwatch face with a red second hand ticking in 60 discrete steps.

Live preview Loaders

Sun Rays

Sun with rotating rays around a glowing yellow center.

#animation #transform #border

Live preview Loaders

Timing Belt

Timing belt moving over gears.

Live preview Loaders

Vinyl Scratch

DJ scratching vinyl record.

Live preview Loaders

Welder Spark

Welding torch throwing bright sparks in bursts.