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 Checkboxes

Power On Toggle

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

#shadow #border #transform

Live preview Cards

Bronze Achievement Card

Bronze-tier achievement with progress and reward.

#gradient #shadow #border

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 Checkboxes

Laptop Work Toggle

A laptop glows blue when checked.

#transform #shadow #filter

Live preview Hover

3D Parallax Tilt

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

#gradient #3d #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 Cards

Character Sheet Card

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

#gradient #shadow #border

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 Toggles

Active / Inactive

Pulsing green dot signals active vs a still grey one.

#animation #transform #shadow

Live preview Buttons

Birch Trunk

White birch trunk with peeling bark.

#hover #gradient #shadow

Live preview Backgrounds

Aurora Curtain

Vertical bands of aurora light ripple like a hanging curtain.

#animation #gradient #transform

Live preview Buttons

3D Push Button

Skeuomorphic 3D button that physically depresses on click.

#hover #3d #shadow

Live preview Buttons

Aurora Borealis

Northern-lights button with shifting aurora hues.

#hover #animation #gradient

Live preview Buttons

Blade Slash Button

Sleek button with a diagonal blade slash on hover.

#hover #gradient #transform

Live preview Cards

Archer Card

Archer card with bow icon and accuracy stat.

#gradient #shadow #border

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

Horizontal Bottom Dot Nav

Horizontal dot navigation at bottom.

#hover #transform #shadow

Live preview Tabs

Savanna Divided Tabs

Hairline dividers separate the tabs and quietly step aside around the active one.

#border #layout #animation

Live preview Toggles

Frozen / Melted

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

#transform #shadow

Live preview Forms

Midnight Background Input

Deep midnight blue gradient background.

#gradient #shadow #border

Live preview Loaders

7 Segment Display

7-segment display counting.

#animation #shadow

Live preview Navigation

Color Shift Navbar

Navbar with hue-shifting links on hover.

#hover #animation #gradient

Live preview Navigation

3D Chevron Breadcrumbs

Breadcrumbs with 3D chevron separators.

#hover #gradient #transform

Live preview Tooltips

3D Fold Origami

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

#hover #transform #border

Live preview Toggles

Equalizer Wave

Flat bars bounce into an animated equalizer.

#animation #transform #shadow

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 Backgrounds

Brown Noise

Warm brown noise drifting like deep ambient rumble.

#animation #gradient #filter

Live preview Checkboxes

3D Press Check

A chunky 3D button-style checkbox that presses down and turns green when checked.

#3d #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 Hover

Duotone Magenta

Magenta-cyan duotone filter on hover.

#hover #transform #filter

Live preview Navigation

Arrow Curve Bend Navbar

Nav with curve-bent arrow separators between items.

#hover

Live preview Navigation

Neon Active Drawer Navbar

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

#hover #animation #shadow

Live preview Navigation

Float Rise Navbar

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

#hover #gradient #transform

Live preview Tabs

Marble Topline Tabs

A veined marble bar with the indicator on its top edge and a popping panel.

#gradient #transform #border

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 Tooltips

Snow Winter

Winter-themed tooltip with falling snow pattern decoration.

#hover #gradient #transform

Live preview Toggles

Arrow / Dots

Solid arrow dissolves into a row of dots.

#transform #shadow

Live preview Toggles

Terminal Prompt

Blinking cursor at a shell prompt toggles to a check output.

#animation #transform #shadow

Live preview Toggles

Tether / Untether Device

Phone knob releases its tether cable on toggle.

#transform #shadow

Live preview Badges

Common Badge

Common achievement badge with gray gradient.

#gradient #transform #shadow

Live preview Badges

Solid Sky Pill

Sky blue pill with white text.

Live preview Badges

Solid Teal Pill

Teal pill badge with deep sea tone.

Live preview Badges

Iridescent Glass Badge

Glass badge with iridescent multi-color shimmer.

#gradient #shadow #border

Live preview Backgrounds

Cassette Rewind

Cassette reels spin rapidly in reverse as tape rewinds.

#animation #gradient #transform

Live preview Backgrounds

Chrome Bubble

Liquid chrome bubble reflecting environment with shifting glare.

#animation #gradient #transform

Live preview Backgrounds

Baroque Damask

Opulent baroque damask with gilded floral flourishes.

#animation #gradient #filter

Live preview Backgrounds

Thin Film Interference

Soap-film thin-film interference patterns shifting bands.

#animation #gradient #transform

Live preview Backgrounds

Animated Ocean Waves

Layered SVG wave shapes ripple across a calm ocean horizon.

#gradient #animation #border

Live preview Buttons

Antique Brass

Tarnished antique brass with verdigris spots.

#hover #gradient #shadow

Live preview Buttons

Barn Owl

Soft tawny owl-feather pattern.

#hover #gradient #shadow

Live preview Buttons

Emery

Emery-abrasive button with a rough gritty texture.

#hover #gradient #shadow

Live preview Buttons

Retro Terminal Button

Monospace terminal-style button with blinking cursor block.

#animation #hover #shadow

Live preview Buttons

Spotlight Sweep Button

A warm yellow spotlight glow follows the cursor across the surface.

#gradient #hover #border

Live preview Cards

Locked Achievement Card

Locked achievement card with a padlock, blurred reward, and unlock hint.

#animation #gradient #transform

Live preview Cards

Article Card

Blog article card with category tag, title, and read time.

#shadow #border

Live preview Checkboxes

Plum Color Toggle

A color swatch that fills with plum when checked.

#transform #shadow #border

Live preview Checkboxes

3D Y-Axis Flip

A 3D flip on the Y axis revealing a checkmark on the back face.

#transform #border #3d

Live preview Checkboxes

Yellowjacket Toggle

A yellowjacket spins yellow when checked.

#animation #transform #shadow

Live preview Forms

Blur Background Input

Input that blurs the surrounding area on focus.

#border #filter

Live preview Forms

Bottom Only Border Input

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

#shadow #border

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 Hover

Curtain Fall

Curtain falls down to cover content on hover.

#hover #gradient #transform

Live preview Hover

Neon Shadow Text

Neon glow shadow on text on hover.

#hover #shadow

Live preview Hover

Wave Ripple Distort

Wave ripple distortion on hover.

#hover #animation #transform

Live preview Hover

Zoom Blur

Content zooms in with a radial blur, simulating a dolly zoom on hover.

#gradient #hover #shadow

Live preview Loaders

Billiards Cue

Pool cue striking ball.

#animation #gradient #transform

Live preview Loaders

Black Hole

A swirling multicolor accretion disk being consumed by a dark core.

#gradient #animation #shadow

Live preview Loaders

Elevator

Elevator car rising and falling inside its shaft.

#animation #gradient #border

Live preview Marquees

Cusp Timestamp Feed

Each headline drags a two line date and clock stamp whose separator keeps blinking.

#marquee #timestamp #feed

Live preview Marquees

Drift Quote Pair

Every entry stacks a short line over its author, with a tilting closing quote mark.

#marquee #quote #author

Live preview Navigation

Arrow Hexagon Shape Navbar

Nav links shaped as hexagons with arrow flow.

#hover

Live preview Navigation

Underline Active Breadcrumbs

Breadcrumbs with underline on active item.

#hover #transform

Live preview Navigation

Elevated Card Navbar

Navbar styled as an elevated card with deep shadow.

#hover #shadow

Live preview Navigation

Floating Dock Navbar

macOS-style floating dock navbar with bouncy hover.

#hover #gradient #transform

Live preview Navigation

Glass Light Navbar

Light glass navbar with subtle backdrop tint.

#hover #gradient #shadow

Live preview Navigation

Vertical Tab Gradient Bg Flow

Vertical tabs with an animated gradient background flow on the active.

#hover #animation #gradient

Live preview Sliders

Valve Thermostat Lever

A raked steel cursor rides a recessed slot between an eco stop and a boost stop, under a lit readout.

#slider #thermostat #lever

Live preview Text

Bicolor Gradient

Smooth bicolor diagonal gradient.

#gradient

Live preview Text

Chess Knight

Chess knight piece on text.

#animation #transform #shadow

Live preview Text

Chevron Arrows

Bold chevron arrow stripes in two-tone.

#gradient

Live preview Text

Fade Depth

Text fading from foreground into deep shadow.

#gradient

Live preview Text

Fade Pulse Deep

Deep pulsing fade animation.

#animation

Live preview Text

Magenta Pop

Bold magenta text with a vibrant electric pop.

#shadow

Live preview Tooltips

Chevron Arrow

Tooltip with chevron-style arrow pointing to trigger.

#hover #transform #border

Browse by category

Popular tags