Most Popular CSS Effects (Page 22)

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

Valley Clickable Status Avatar

Clicking the avatar flips the presence label between available and do not disturb.

#checkbox #toggle #status

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

Live preview Badges

Bronze Metallic Badge

Bronze metallic badge with warm copper gradient.

#gradient #shadow #border

Live preview Badges

Brutalist Black Badge

Brutalist badge with sharp edges and offset shadow.

#transform #shadow #border

Live preview Badges

Double Brutalist Badge

Brutalist badge with double offset shadows.

#transform #shadow #border

Live preview Badges

Brutalist Green Badge

Brutalist green badge with bold offset shadow.

#transform #shadow #border

Live preview Badges

Brutalist Orange Badge

Brutalist orange badge with stark black border.

#transform #shadow #border

Live preview Badges

Brutalist Outline Badge

Brutalist badge with transparent body and thick outline.

#transform #shadow #border

Live preview Badges

Brutalist Pink Badge

Brutalist pink badge with offset shadow.

#transform #shadow #border

Live preview Badges

Brutalist Yellow Badge

Brutalist yellow badge with thick border and offset shadow.

#transform #shadow #border

Live preview Badges

Candy Cupcake Badge

Cupcake badge with frosting-pink swirl and gold sprinkles.

#gradient #shadow #border

Live preview Badges

Candy Gummy Badge

Translucent gummy bear-style badge with jelly glow.

#shadow #border #filter

Live preview Badges

Candy Lollipop Badge

Lollipop badge with spiral swirl pattern.

#gradient #shadow #border

Live preview Badges

Candy Marshmallow Badge

Puffy white marshmallow badge with soft shadow.

#gradient #shadow #border

Live preview Badges

Cave Crystal Badge

Faceted crystal badge with diamond-cut shimmer.

#gradient #shadow #border

Live preview Badges

Cloud AWS Badge

AWS cloud badge with orange-to-dark gradient and Squidward.

#gradient #shadow #border

Live preview Badges

Cloud Azure Badge

Microsoft Azure badge with blue A-triangle styling.

#gradient #shadow #border

Live preview Badges

Cloud Cloudflare Badge

Cloudflare cloud badge with orange-flame styling.

#gradient #shadow #border

Live preview Badges

Cloud DigitalOcean Badge

DigitalOcean cloud badge with blue-curve wave styling.

#gradient #shadow #border

Live preview Badges

Cloud Render Badge

Render cloud badge with deep-violet styling.

#gradient #shadow #border

Live preview Badges

Cloud Vercel Badge

Vercel cloud badge with mono triangle-marker styling.

#gradient #shadow #border

Live preview Badges

Solid Amber Pill

Flat amber pill with dark text for readability.

Live preview Badges

Solid Cyan Pill

Bright cyan pill with dark text for contrast.

Live preview Badges

Solid Emerald Pill

Emerald green pill with elegant tone.

Live preview Badges

Solid Fuchsia Pill

Vivid fuchsia pill badge.

Live preview Badges

Solid Green Pill

Classic green pill badge with white text.

Live preview Badges

Solid Indigo Pill

Deep indigo pill badge.

Live preview Badges

Solid Orange Pill

Flat solid orange pill badge.

Live preview Badges

Solid Pink Pill

Soft pink pill badge.

Live preview Badges

Solid Purple Pill

Royal purple pill badge.

Browse by category

Popular tags