Most Popular CSS Effects (Page 22)

Live preview Avatars

Mesa Letter To Icon Avatar

The monogram swaps for a drawn plus glyph so the tile doubles as an add action.

#icon #monogram #hover

Live preview Avatars

Monsoon Outline Ripple Avatar

Outline rings instead of shadows expand outwards from the transparent avatar.

#outline #ripple #animation

Live preview Avatars

Nickel Flip Card Avatar

The avatar flips on its vertical axis to reveal the member role on the back.

#flip #transform #hover

Live preview Avatars

Oasis Drawn Outline Avatar

An SVG dash segment travels around the avatar as a continuously drawn contour.

#svg #stroke-dasharray #animation

Live preview Avatars

Obsidian Medal Frame Avatar

Two laurel arcs orbit the portrait above a clipped award ribbon tail.

#medal #frame #animation

Live preview Avatars

Onyx Hexagon Avatar

A clip-path hexagon frame wraps a smaller hexagon holding the initials.

#clip-path #hexagon #hover

Live preview Avatars

Opal Skeleton Loading Avatar

A shimmering placeholder avatar with two loading text bars beside it.

#skeleton #loading #shimmer

Live preview Avatars

Pearl Glimmer Sheen Avatar

A narrow light bar sweeps diagonally across the pearl-rimmed portrait disc.

#shine #animation #gradient

Live preview Avatars

Piston Typing Indicator Avatar

Three dots pump inside a tailed bubble to show that this member is still typing.

#typing #chat #animation

Live preview Avatars

Prairie Vertical Member Column

Three members stacked in a column threaded by a single vertical guide line.

#list #vertical #hover

Live preview Avatars

Pylon Offline Duration Avatar

A hollow presence dot, an elapsed time line and a decaying activity strip mark absence.

#offline #timeline #muted

Live preview Avatars

Quartz Squircle Avatar

A gradient-lined squircle melts into a full circle when you hover it.

#squircle #gradient #border-radius

Live preview Avatars

Quiver Reply Bubble Avatar

A reply bubble beside its avatar twitches now and then under the quoted parent line.

#reply #thread #bubble

Live preview Avatars

Ratchet Open Seat Invite Slot

Two seated members sit next to a dashed empty seat whose plus turns when hovered.

#invite #empty-slot #dashed

Live preview Avatars

Ridge Layered Depth Avatar

Two tilted plates stack behind the avatar and fan wider when it is hovered.

#layers #depth #shadow

Live preview Avatars

Ripple Long Press Avatar

Holding the avatar slowly floods it with colour so a long press reads as progress.

#active #long-press #interactive

Live preview Avatars

Ruby Inset Well Avatar

The portrait sinks into an embossed plate carved out with inner shadows.

#neumorphism #inset-shadow #hover

Live preview Avatars

Savanna Badge Corner Set

One avatar shown four times so every badge corner placement can be compared.

#badge #placement #showcase

Live preview Avatars

Shaft Split Disc Duo Avatar

One disc is cut into two clipped halves so a shared project reads as a single mark.

#duo #clip-path #shared

Live preview Avatars

Slate Presence Pulse Avatar

The green presence dot emits a soft ripple so the user reads as online.

#status #animation #pulse

Live preview Avatars

Socket Country Corner Avatar

A tilted tricolour chip marks the country corner and straightens when hovered.

#country #corner-badge #hover

Live preview Avatars

Spindle Level Ring Avatar

A conic experience ring wraps the avatar and the level chip glows under it.

#level #conic-gradient #progress

Live preview Avatars

Spiral Padding Ring Avatar

The gap around the portrait is pure padding, so hovering can widen the whole ring.

#padding #ring #hover

Live preview Avatars

Summit Focus Within Avatar

Focusing the action button lights a ring around the whole avatar block.

#focus-within #accessibility #ring

Live preview Avatars

Tether Social Handle Avatar

A drawn camera badge pulses at the corner and rights itself when the avatar is hovered.

#social #badge #icon-drawing

Live preview Avatars

Thicket Paired Match Avatars

Two avatars lean apart until hover pulls them together over a beating link node.

#pair #match #animation

Live preview Avatars

Tide Thin Thick Ring Swap

A hairline ring and a heavy ring trade their weights when the avatar is hovered.

#ring #border #hover

Live preview Avatars

Topaz Notification Count Avatar

An unread counter badge nudges itself every few seconds to draw the eye.

#badge #notification #animation

Live preview Avatars

Tundra Pentagon Frame Avatar

A pentagon frame sways slowly around a second pentagon holding the initials.

#clip-path #pentagon #animation

Live preview Avatars

Turbine Screen Share Frame

Marching dashes run around a monitor frame while the presenter avatar sits inside it.

#screen-share #marching-ants #animation

Live preview Avatars

Valve Team Colour Band Avatars

Each tile carries a team coloured band along its base that grows taller on hover.

#team #band #hover

Live preview Avatars

Verge Circle In Square Mask

A circular clip inside a square plate widens on hover until it fills the corners.

#clip-path #mask #square

Live preview Avatars

Wander Skill Chip Avatar

Skill chips beside the avatar rise one after another when the row is hovered.

#chips #tags #hover

Live preview Avatars

Willow Knockout Initials Avatar

Initials are punched out of the coloured disc so the dark bench shows through.

#knockout #negative-space #typography

Live preview Avatars

Wisp Short Biography Card

A compact card pairing the avatar with a single biography line and an accent edge.

#bio #card #profile

Live preview Avatars

Zenith Numbered Rank List

An ordered podium list where the first three places carry their own metal ring.

#ranking #list #leaderboard

Live preview Badges

Epic Badge

Epic achievement badge with purple gradient.

#gradient #transform #shadow

Live preview Badges

Honor Badge

Badge of honor with deep purple and gold trim.

#transform #shadow #border

Live preview Badges

Legendary Badge

Legendary achievement badge with rainbow shimmer.

#animation #gradient #transform

Live preview Badges

Mastery Badge

Mastery achievement badge with elite styling.

#transform #shadow #border

Live preview Badges

Milestone Badge

Milestone achievement badge with celebratory styling.

#gradient #shadow #border

Live preview Badges

Rare Badge

Rare achievement badge with blue gradient.

#gradient #transform #shadow

Live preview Badges

Star Achievement

Star achievement badge for completion recognition.

#shadow #border

Live preview Badges

Action Archive Badge

Archive action badge with box glyph and amber tone.

#gradient #shadow #border

Live preview Badges

Action Delete Badge

Delete action badge with red destructive styling.

#gradient #shadow #border

Live preview Badges

Action Download Badge

Download action badge with down-arrow glyph and indigo tone.

#gradient #shadow #border

Live preview Badges

Action Email Badge

Email action badge with envelope glyph and rose tone.

#gradient #shadow #border

Live preview Badges

Action Print Badge

Print action badge with printer glyph and zinc tone.

#gradient #shadow #border

Live preview Badges

Action Save Badge

Save action badge with floppy-disk glyph and green tone.

#gradient #shadow #border

Live preview Badges

Action Share Badge

Share action badge with purple accent and round shape.

#gradient #shadow #border

Live preview Badges

Action Upload Badge

Upload action badge with up-arrow glyph and sky-blue tone.

#gradient #shadow #border

Live preview Badges

Critical Alert Badge

Critical alert badge with pulsing red animation.

#animation #transform #shadow

Live preview Badges

Danger Alert Badge

Critical danger alert badge with strong red.

#transform #shadow #border

Live preview Badges

Error Alert Badge

Red error alert badge with warning style.

#shadow #border

Live preview Badges

Info Alert Badge

Blue info alert badge for general notifications.

#shadow #border

Live preview Badges

Live Indicator Badge

Live broadcast indicator badge with red pulse.

#animation #transform

Live preview Badges

Notice Badge

Neutral notice badge in slate color.

#border

Live preview Badges

Warning Alert Badge

Yellow warning alert badge.

#shadow #border

Live preview Badges

Blink Badge

Badge that blinks on and off.

#animation

Live preview Badges

Bounce In Badge

Badge that bounces in on render.

#animation #transform

Live preview Badges

Bounce Loop Badge

Badge that bounces continuously.

#animation #transform

Live preview Badges

Breathing Badge

Badge that gently breathes with subtle scale.

#animation #transform

Live preview Badges

Fill Bar Badge

Badge with animated bottom fill bar.

#animation #gradient

Live preview Badges

Fire Badge

Badge with hot flickering fire effect.

#animation #gradient #transform

Live preview Badges

Flicker Badge

Badge with candle-like flicker effect.

#animation #shadow #filter

Live preview Badges

3D Flip Badge

Badge that flips in 3D continuously.

#animation #transform

Live preview Badges

Float Badge

Badge that gently floats up and down.

#animation #transform

Live preview Badges

Gleam Badge

Badge with subtle gleam reflection.

#animation #gradient #transform

Live preview Badges

Glitch Badge

Badge with cyberpunk glitch effect.

#animation #transform #shadow

Live preview Badges

Gradient Shift Badge

Badge with continuously shifting gradient.

#animation #gradient

Live preview Badges

Jello Badge

Badge with jello-like wobble animation.

#animation #transform

Live preview Badges

Marquee Text Badge

Wide badge with scrolling text marquee.

#animation #transform

Live preview Badges

Particle Badge

Badge with floating particle dots around it.

#animation #transform #shadow

Live preview Badges

Pendulum Badge

Badge that swings like a pendulum.

#animation #transform

Live preview Badges

Progress Bar Badge

Badge with indeterminate progress indicator.

#animation #gradient

Live preview Badges

Double Ring Pulse Badge

Badge with two expanding ring pulses staggered.

#animation #transform #border

Live preview Badges

Pulse Glow Badge

Badge with pulsing glow halo around it.

#animation #shadow

Live preview Badges

Pulse Ring Badge

Badge with expanding ring pulses around it.

#animation #transform #border

Live preview Badges

Pulse Scale Badge

Badge that continuously scales up and down.

#animation #transform

Live preview Badges

Pulse Shadow Badge

Badge with pulsing colored shadow.

#animation #shadow

Live preview Badges

RGB Cycle Badge

Gamer-style RGB cycling badge.

#animation #transform #shadow

Live preview Badges

3D Rotate Badge

Badge that rotates in 3D continuously.

#animation #transform

Live preview Badges

Shake Badge

Badge that shakes side-to-side continuously.

#animation #transform

Live preview Badges

Shimmer Badge

Badge with continuous shimmer effect.

#animation #gradient

Live preview Badges

Shine Sweep Badge

Badge with diagonal light sweep across surface.

#animation #gradient #transform

Live preview Badges

Sparkle Badge

Badge with twinkling sparkle effect.

#animation #gradient #shadow

Live preview Badges

Tilt Badge

Badge that tilts back and forth.

#animation #transform

Live preview Badges

Typewriter Badge

Badge with text appearing like a typewriter.

#animation #border

Live preview Badges

Typing Dots Badge

Badge with three typing indicator dots.

#animation #transform #border

Live preview Badges

Three Dots Loading Badge

Badge with three pulsing loading dots.

#animation #transform #border

Live preview Badges

Water Drop Badge

Badge with water drop ripple effect.

#animation #transform

Live preview Badges

Wave Badge

Badge with subtle wave shimmer effect.

#animation #gradient #transform

Live preview Badges

Arctic Aurora Badge

Aurora-borealis gradient badge with shifting green-violet haze.

#animation #gradient #shadow

Live preview Badges

Arctic Snow Badge

Snowy white badge with subtle flake speckles.

#gradient #shadow #border

Live preview Badges

Art Deco Badge

Art deco badge with gold geometric pattern.

#gradient #transform #border

Live preview Badges

Beta Dot Badge

Subtle beta badge with a small status dot indicator.

#animation #border

Browse by category

Popular tags