Most Popular CSS Effects (Page 65)

Live preview Hover

Bracket Tighten

Outer brackets tighten inward to grip the element on hover.

#hover #transform #border

Live preview Hover

Cassette Flap Frame

Top flap opens like a cassette tape on hover.

#hover #transform #border

Live preview Hover

Chevron Trace Frame

Chevron pattern traces the border on hover.

#hover #gradient #transform

Live preview Hover

Corners Slide Frame

Four corner brackets slide inward from each edge on hover.

#hover #border

Live preview Hover

Dotted Crawl Frame

Dotted border slowly crawls around on hover.

#hover #animation #border

Live preview Hover

Double Trace Frame

Two borders trace around the element on hover.

#hover #transform #border

Live preview Hover

Fire Edge Frame

Burning ember effect glows along the edge on hover.

#hover #animation #shadow

Live preview Hover

Fold Out Frame

Frame panels fold outward like opening a box on hover.

#hover #transform #shadow

Live preview Hover

Strong Glow Edge

Strong neon glow surrounds the element on hover.

#hover #shadow #border

Live preview Hover

Glow Pulse Edge

Edges pulse with glowing animation on hover.

#hover #animation #shadow

Live preview Hover

Hologram Edge Frame

Holographic shimmer traces the frame on hover.

#hover #animation #gradient

Live preview Hover

Ice Edge Frame

Crystalline ice frost forms on the edges on hover.

#hover #shadow #border

Live preview Hover

Mirror Half Frame

Frame halves slide in from top and bottom mirror on hover.

#hover #transform

Live preview Hover

Origami Corner Frame

Origami paper folds unfold at corners on hover.

#hover #border

Live preview Hover

Outset Bevel Frame

Outset beveled frame lifts the element on hover.

#hover #transform #shadow

Live preview Hover

Photo Corners

Photo-album corner mounts appear on the four corners on hover.

#hover #transform

Live preview Hover

Polaroid Fold Frame

Polaroid-style frame with thick bottom border lifts on hover.

#hover #transform #shadow

Live preview Hover

Rainbow Arc Frame

Rainbow gradient arc traces the frame on hover.

#hover #animation #gradient

Live preview Hover

Ribbon Trace Frame

Ribbon-like band traces around the border on hover.

#hover #animation #gradient

Live preview Hover

Rotate Square Frame

Outer square frame rotates around the element on hover.

#hover #animation #transform

Live preview Hover

Scale Edge Frame

Border scales from outside inward to frame the element on hover.

#hover #transform #border

Live preview Hover

Split Half Frame

Frame splits vertically and retracts to sides on hover.

#hover #transform

Live preview Hover

Stripes Slide Frame

Diagonal stripes slide across the border on hover.

#hover #gradient #border

Live preview Hover

Tab Fold Frame

Top tab folds down to form a header on hover.

#hover #transform

Live preview Hover

Tape Peel Frame

Tape strip peels away revealing the border on hover.

#hover #transform

Live preview Hover

Tick Tack Frame

Border ticks alternate like a tick-tack animation on hover.

#hover #transform

Live preview Hover

Twist Corner Frame

Corners twist into place with 3D rotation on hover.

#hover #transform #border

Live preview Hover

VHS Trace Frame

VHS tracking distortion lines trace the border on hover.

#hover #animation #gradient

Live preview Hover

Wavy Line Frame

Wavy line undulates around the border on hover.

#hover #shadow #border

Live preview Hover

Zipper Open Frame

Zipper teeth separate as frame opens on hover.

#hover #gradient #border

Live preview Hover

Frost Crystal

Frost crystals form on hover.

#hover #shadow

Live preview Hover

Frost Freeze

Icy crystal pattern forms over the panel with a frosted blue tint on hover.

#gradient #hover #shadow

Live preview Hover

Gleam Cross

Cross gleam flashes on hover.

#hover #transform

Live preview Hover

Glitch Slice

Element slices with glitch effect on hover.

#hover #animation #transform

Live preview Hover

Glitter Twinkle

Twinkling glitter on hover.

#hover #animation #shadow

Live preview Hover

Glow Aura Orb

Expanding aura orb radiates on hover.

#hover #gradient #transform

Live preview Hover

Glow Bloom Soft

Soft bloom glow expands on hover.

#hover #shadow #filter

Live preview Hover

Glow Border

A neon border glow softens and brightens on hover.

#glow #hover #shadow

Live preview Hover

Glow Flicker Tube

Fluorescent tube flicker on hover.

#hover #animation #shadow

Live preview Hover

Glow Gleam Sweep

Bright gleam sweeps across on hover.

#hover #gradient #transform

Live preview Hover

Glow Gradient Flow

Animated gradient glow flows around on hover.

#hover #animation #gradient

Live preview Hover

Glow Halo Disc

Floating halo disc forms above on hover.

#hover #gradient #transform

Live preview Hover

Glow Intensify

Soft glow steadily intensifies on hover.

#hover #shadow

Live preview Hover

Glow Rainbow

Cycling rainbow glow on hover.

#hover #animation #shadow

Live preview Hover

Glow Shimmer Wave

Shimmer wave of light on hover.

#hover #gradient #transform

Live preview Hover

Glow Twinkle Field

Twinkling starfield glows on hover.

#hover #animation #gradient

Live preview Hover

Glow Vignette Deep

Deep vignette shadow with inner glow on hover.

#hover #gradient #shadow

Live preview Hover

Gold Sheen Sweep

Metallic gold sheen sweeps diagonally on hover.

#hover #gradient #transform

Live preview Hover

Gradient Glow

Multi-color gradient glow surrounds on hover.

#hover #animation #gradient

Live preview Hover

Gradient Sweep

A diagonal gradient band sweeps across the button on hover.

#gradient #hover #border

Live preview Hover

Grain Texture Reveal

A subtle film-grain noise texture fades in over the panel on hover.

#hover #border #transform

Live preview Hover

Grayscale Full

Complete grayscale conversion on hover.

#hover #gradient #transform

Live preview Hover

Green Shift

Hue rotates to green on hover.

#hover #transform #filter

Live preview Hover

Grow Clear

Element grows from blurred to clear on hover.

#hover #transform #filter

Live preview Hover

Handstand

Element flips upside down on hover.

#hover #transform

Live preview Hover

Has-Selector Sibling Dim

Hovering one row dims every other row, because :has() lifts the state to the list.

#hover #filter #transform

Live preview Hover

Heartbeat Pulse

Element pulses like a heartbeat on hover.

#hover #animation #transform

Live preview Hover

Hearts Burst

Hearts burst outward on hover.

#hover #animation #transform

Live preview Hover

Hearts Float

Tiny hearts float up on hover.

#hover #animation #transform

Live preview Hover

Hue Cycle

Element cycles through the full hue spectrum on hover.

#hover #animation #gradient

Live preview Hover

Hue Cycle Full

Continuously cycles hue through full 360° on hover.

#hover #animation #transform

Live preview Hover

Image Zoom Overlay

Image scales up gently while a dark overlay fades in with a caption.

#gradient #hover #border

Live preview Hover

Implode

Content shrinks toward a central point with a vortex glow on hover.

#gradient #hover #border

Live preview Hover

Infrared Heat

Infrared heat-glow on hover.

#hover #shadow

Live preview Hover

Invert Flash

Colors instantly invert on hover.

#hover #filter

Live preview Hover

Invert Partial

Partial color inversion creates a surreal tone on hover.

#hover #transform #filter

Live preview Hover

Invert Strobe

Rapid inversion strobe pulses on hover.

#hover #animation #filter

Live preview Hover

Iris Close

Iris-shutter closes on hover.

#hover #gradient #transform

Live preview Hover

Iris Expand

Iris expands to reveal on hover.

#hover #gradient #transform

Live preview Hover

Iris Open

Circular iris opens to reveal new color on hover.

#hover #transform

Live preview Hover

Iris Shrink

Iris shrinks to a point on hover.

#hover #gradient

Live preview Hover

Jelly Bounce

Jelly-like bounce on hover.

#hover #animation #transform

Live preview Hover

Jelly Wobble Fast

Fast jelly wobble on hover.

#hover #animation #transform

Live preview Hover

Jiggle Fast

Fast jiggle on hover.

#hover #animation #transform

Live preview Hover

Jiggle Slow

Slow jiggle on hover.

#hover #animation #transform

Live preview Hover

Jiggle Small

Element jiggles with tiny rapid movements on hover.

#hover #animation #transform

Live preview Hover

Key Light Studio

Studio key-light sweep on hover.

#hover #gradient #transform

Live preview Hover

Laser Line

Thin laser line crosses horizontally on hover.

#hover #transform #shadow

Live preview Hover

Leap Up

Element leaps upward on hover.

#hover #transform #shadow

Live preview Hover

Lens Flare

Lens flare spots drift across on hover.

#hover #gradient

Live preview Hover

Lens Flare Burst

Burst of lens flares on hover.

#hover #gradient

Live preview Hover

Letter-Spacing Expand

Text loosens its letter-spacing and inverts color on hover.

#hover #border

Live preview Hover

Lift Card Shadow

Card lifts upward with a soft, diffuse shadow on hover.

#hover #shadow #border

Live preview Hover

Lightning Flash

Lightning flash on hover.

#hover #animation #shadow

Live preview Hover

Liquid Fill

Liquid fills up from bottom on hover.

#hover #gradient

Live preview Hover

Look Up

Element looks up on hover.

#hover #transform

Live preview Hover

Magenta Burst

Magenta color bursts outward on hover.

#hover #shadow

Live preview Hover

Magenta Shift

Hue rotates to magenta on hover.

#hover #transform #filter

Live preview Hover

Horizontal Bars Reveal

Multiple horizontal bars slide in on hover.

#hover #transform

Live preview Hover

Vertical Bars Reveal

Multiple vertical bars slide in to reveal content on hover.

#hover #transform

Live preview Hover

Center Out Mask

Mask expands from center outward on hover.

#hover

Live preview Hover

Checker Emerge Mask

Checkerboard pattern emerges on hover.

#hover

Live preview Hover

Circle Clip Grow

Circle clip-path grows to reveal on hover.

#hover #gradient

Live preview Hover

Circle Clip Shrink

Circle clip-path shrinks to reveal original on hover.

#hover #gradient

Live preview Hover

Diamond Clip

Diamond-shaped clip-path reveals on hover.

#hover

Live preview Hover

Octagon Clip

Octagon clip-path reveals on hover.

#hover

Browse by category

Popular tags