Most Popular CSS Effects

Live preview Checkboxes

Church Toggle

A church glows softly white when checked.

#transform #shadow #filter

Live preview Buttons

Abalone Shell

Iridescent abalone shell with shifting hues.

#animation #gradient #transform

Live preview Cards

Bronze Achievement Card

Bronze-tier achievement with progress and reward.

#gradient #shadow #border

Live preview Checkboxes

Power On Toggle

A power-symbol checkbox that glows green when powered on, dark when off.

#shadow #border #transform

Live preview Backgrounds

Deep Abyss

Lightless ocean abyss glows faintly with bioluminescent specks.

#animation #gradient #transform

Live preview Backgrounds

De Stijl Mondrian

Mondrian-style primary color blocks with bold black lines.

#animation #gradient #filter

Live preview Buttons

Alpine Peak

Snow-capped alpine mountain button.

#hover #gradient #shadow

Live preview Cards

Alarm Card

Alarm card with a clock face, set time, and toggle indicator.

#gradient #transform #shadow

Live preview Navigation

Floating Bottom Nav

Floating bottom navigation with pill design.

#hover #gradient #shadow

Live preview Hover

Orbit Spiral

Spiral inward orbit on hover.

#hover #animation #transform

Live preview Buttons

Aurora Borealis

Northern-lights button with shifting aurora hues.

#hover #animation #gradient

Live preview Checkboxes

Laptop Work Toggle

A laptop glows blue when checked.

#transform #shadow #filter

Live preview Hover

3D Tilt Follow

Element tilts in 3D following cursor on hover.

#gradient #transform

Live preview Loaders

Baguette Slice

Baguette being sliced.

#animation #gradient #shadow

Live preview Navigation

Horizontal Bottom Dot Nav

Horizontal dot navigation at bottom.

#hover #transform #shadow

Live preview Buttons

Birch Trunk

White birch trunk with peeling bark.

#hover #gradient #shadow

Live preview Cards

Character Sheet Card

RPG character sheet card with stats, class, and level.

#gradient #shadow #border

Live preview Loaders

7 Segment Display

7-segment display counting.

#animation #shadow

Live preview Tooltips

3D Fold Origami

Tooltip that unfolds in 3D like an origami paper fold.

#hover #transform #border

Live preview Toggles

Active / Inactive

Pulsing green dot signals active vs a still grey one.

#animation #transform #shadow

Live preview Toggles

Frozen / Melted

Frozen ice knob melts into a puddle shape on the cyan track.

#transform #shadow

Live preview Backgrounds

Aurora Curtain

Vertical bands of aurora light ripple like a hanging curtain.

#animation #gradient #transform

Live preview Hover

3D Parallax Tilt

Layers shift in 3D based on cursor position for a parallax depth effect.

#gradient #3d #shadow

Live preview Hover

Quiver Hard

Hard intense quiver on hover.

#hover #animation #transform

Live preview Loaders

Wormhole Tunnel

Traveling through a wormhole tunnel.

#animation #gradient #transform

Live preview Navigation

Neon Active Drawer Navbar

Drawer with a pulsing neon active indicator on the active link.

#hover #animation #shadow

Live preview Tooltips

3D Cube Spin

Tooltip that spins in 3D like a tumbling cube above the trigger.

#hover #transform #border

Live preview Tooltips

Square Arrow Left

Tooltip with a sharp square-cut arrow pointing right.

#hover #transform

Live preview Toggles

Hot / Cold

Flame turns to a snowflake as the temperature flips.

#gradient #transform #shadow

Live preview Badges

Action Copy Badge

Copy action badge with duplicate-page glyph and slate tone.

#gradient #shadow #border

Live preview Badges

Solid Teal Pill

Teal pill badge with deep sea tone.

Live preview Backgrounds

Brown Noise

Warm brown noise drifting like deep ambient rumble.

#animation #gradient #filter

Live preview Buttons

Blade Slash Button

Sleek button with a diagonal blade slash on hover.

#hover #gradient #transform

Live preview Buttons

Emery

Emery-abrasive button with a rough gritty texture.

#hover #gradient #shadow

Live preview Forms

Blur Background Input

Input that blurs the surrounding area on focus.

#border #filter

Live preview Forms

Midnight Background Input

Deep midnight blue gradient background.

#gradient #shadow #border

Live preview Forms

Bottom Only Border Input

Minimalist input with only a bottom border that thickens on focus.

#shadow #border

Live preview Hover

Aperture Iris Close

A dark circular iris contracts over the panel like a camera aperture closing on hover.

#gradient #hover #border

Live preview Hover

Blink Swap

Content blinks rapidly and swaps text on each blink cycle on hover.

#animation #hover #border

Live preview Navigation

Arrow Curve Bend Navbar

Nav with curve-bent arrow separators between items.

#hover

Live preview Text

Chess Knight

Chess knight piece on text.

#animation #transform #shadow

Live preview Toggles

Arrow / Dots

Solid arrow dissolves into a row of dots.

#transform #shadow

Live preview Toggles

Awake / Tired

Wide-awake eye closes into a sleepy yawn.

#transform #shadow

Live preview Toggles

Bit Flip

Binary bit flips between 0 and 1 in monospace green.

#transform #shadow #border

Live preview Badges

Ripple Badge

Badge with expanding ripple waves.

#animation #transform #border

Live preview Backgrounds

Abalone Nacre

Abalone shell nacre with shifting iridescent colors.

#animation #gradient #transform

Live preview Backgrounds

Cassette Rewind

Cassette reels spin rapidly in reverse as tape rewinds.

#animation #gradient #transform

Live preview Buttons

3D Push Button

Skeuomorphic 3D button that physically depresses on click.

#hover #3d #shadow

Live preview Buttons

Frosted Ice Button

Translucent frosted ice button with a sweeping crystalline shine.

#gradient #hover #glass

Live preview Buttons

Ocean Tide

Waves rolling across a blue button face.

#animation #gradient #transform

Live preview Buttons

Violet Storm

Deep violet button with lightning flicker.

#animation #gradient #shadow

Live preview Buttons

Yarrow

Pale yarrow-cluster button with tiny white dots.

#hover #gradient #shadow

Live preview Cards

Beer Flight Card

Beer flight card with sample glasses and ABV range.

#gradient #shadow #border

Live preview Cards

Beer Pair Tips Card

Beer pairing tips card with beer style, dish pairing, and reasoning.

#gradient #shadow #border

Live preview Checkboxes

Apartment Toggle

An apartment building scales in blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Battery Charge Toggle

A battery glows green when checked.

#animation #transform #shadow

Live preview Checkboxes

Circle Stroke Draw

An SVG circle outline draws itself around a center dot that pops in when checked.

#border #transform #rotate

Live preview Forms

Glassmorphism Input

Frosted glass input with backdrop blur and translucent border.

#shadow #border #filter

Live preview Forms

Bounce Arrow Dropdown

Dropdown with bouncing arrow indicator on focus.

#animation #transform #shadow

Live preview Hover

Bounce Elastic

Elastic overshoot bounce on hover.

#hover #transform

Live preview Loaders

Actuator

Linear actuator extending arm.

#animation #gradient

Live preview Loaders

Arcade Cabinet

Retro arcade cabinet screen flickering with neon glow.

#animation #gradient #shadow

Live preview Loaders

Billiards Cue

Pool cue striking ball.

#animation #gradient #transform

Live preview Navigation

Arrow Hexagon Shape Navbar

Nav links shaped as hexagons with arrow flow.

#hover

Live preview Navigation

Float Rise Navbar

Hovered links gently rise and float with a soft glow underneath.

#hover #gradient #transform

Live preview Text

Bicolor Gradient

Smooth bicolor diagonal gradient.

#gradient

Live preview Text

Fade Depth

Text fading from foreground into deep shadow.

#gradient

Live preview Text

Magenta Pop

Bold magenta text with a vibrant electric pop.

#shadow

Live preview Tooltips

Curve Arrow Top

Tooltip with a curved swooping connector above the trigger.

#hover #transform #border

Live preview Tooltips

Charcoal Noir

Near-black charcoal tooltip with a film-noir mood.

#hover #transform #shadow

Live preview Tooltips

Message Tail Clip

Chat-bubble tooltip with a clip-path message tail.

#hover #transform

Live preview Badges

Gold Medal Achievement

Gold medal achievement badge with shine effect.

#gradient #shadow #border

Live preview Badges

Success Alert Badge

Green success alert badge.

#shadow #border

Live preview Badges

Certified Ribbon Badge

Certified badge styled like an official ribbon stamp.

#transform #shadow #border

Live preview Badges

Fine sand streams horizontally in a desert wind blast.

#animation #gradient

Browse by category

Popular tags