Badges — 610 CSS effects

Status labels, notification counters, and compact indicators.

Pure CSS with no dependencies or build step. Open any effect for a live preview, source code, and browser editing.

Page 1 of 7

Live preview Badges

Action Copy Badge

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

#gradient #shadow #border

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 Badges

Action Edit Badge

Edit action badge with pencil glyph and blue accent.

#gradient #shadow #border

Live preview Badges

Breathe Glow Badge

Badge with breathing glow effect.

#animation #transform #shadow

Live preview Badges

Glisten Badge

Badge with glistening sparkle dots animation.

#animation #gradient #shadow

Live preview Badges

Pulse Color Badge

Badge with color cycling through palette.

#animation

Live preview Badges

Ripple Badge

Badge with expanding ripple waves.

#animation #transform #border

Live preview Badges

Spring Pop Badge

Badge that springs into view with overshoot.

#animation #transform

Live preview Badges

Caret Typing Badge

Badge with blinking caret like terminal input.

#animation #border

Live preview Badges

Arctic Ice Badge

Icy white-blue badge with crystalline chill.

#gradient #shadow #border

Live preview Badges

Award Ribbon

Award ribbon medal with two hanging tails.

#gradient #transform #shadow

Live preview Badges

Brutalist Cyan Badge

Brutalist cyan badge with sharp offset shadow.

#transform #shadow #border

Live preview Badges

Cave Stalactite Badge

Sharp stalactite-shaped badge with pointed bottom edge.

#gradient #border

Live preview Badges

Cloud Netlify Badge

Netlify cloud badge with teal-teal gradient styling.

#gradient #shadow #border

Live preview Badges

Solid Lime Pill

Vibrant lime pill badge with dark text.

Live preview Badges

Deco Corner Fold Badge

Badge with folded-paper corner triangle accent.

#gradient #shadow #border

Live preview Badges

Deco Curve Corner Badge

Badge with asymmetric curved corner radius.

#gradient #shadow #border

Live preview Badges

Doc Excel Badge

Excel document badge with green XLS tag.

#gradient #shadow #border

Live preview Badges

Eco Vegan Badge

Vegan-certified badge with leaf seedling styling.

#gradient #shadow #border

Live preview Badges

BG Fade FX Badge

Animated badge with cross-fading background colors.

#animation #gradient #shadow

Live preview Badges

Confetti Burst FX Badge

Animated badge with confetti-burst particle dots.

#animation #gradient #transform

Live preview Badges

Glass Frost Badge

Frosted glass badge with backdrop blur and subtle border.

#shadow #border #filter

Live preview Badges

New Pill Badge

Green pill badge announcing new content with a subtle pop-in.

#animation #gradient #transform

Live preview Badges

Bronze Award Ribbon

Bronze award ribbon with green tails.

#gradient #transform #shadow

Live preview Badges

Certified Circle Seal

Certified seal with double circle and dashed accent.

#transform #border

Live preview Badges

Star Burst Seal

Sunburst seal with star points radiating outward.

#transform #shadow #filter

Live preview Badges

Arrow Tag Shape Badge

Right-pointing arrow-tag badge with pointed end.

#gradient #shadow

Live preview Badges

Star Shape Badge

Five-point star-shaped badge with golden glow.

#gradient #shadow

Live preview Badges

Space Planet Badge

Planet badge with orbital ring around the text.

#gradient #transform #shadow

Live preview Badges

Canceled Stamp

Canceled stamp with strong red diagonal style.

#transform #shadow #border

Live preview Badges

State Queued Badge

Queued state badge with hourglass-style indicator.

#border

Live preview Badges

Tag With Hole

Price tag with string hole and notched left side.

#transform #shadow

Live preview Badges

Trust Firewall Badge

Firewall-protected badge with brick-wall red tone.

#gradient #shadow #border

Live preview Badges

Vapor Palm Badge

Vaporwave badge with palm-tree silhouette accent.

#gradient #shadow #border

Live preview Badges

Weather Hail Badge

Hail weather badge with ice-stone speckle pattern.

#gradient #shadow #border

Live preview Badges

Y2K Daisy Badge

Daisy-themed badge with white-yellow petal styling.

#gradient #shadow #border

Live preview Badges

Gold Medal Achievement

Gold medal achievement badge with shine effect.

#gradient #shadow #border

Live preview Badges

Trophy Achievement

Trophy-style achievement badge with golden shine.

#gradient #shadow #border

Live preview Badges

Breaking News Badge

Breaking news badge with red pulsing dot.

#animation

Live preview Badges

Success Alert Badge

Green success alert badge.

#shadow #border

Live preview Badges

Confetti Burst Badge

Badge with colorful confetti burst animation.

#animation #transform

Live preview Badges

Electric Badge

Badge with electric pulse effect.

#animation #transform #shadow

Live preview Badges

Glow Pulse Badge

Badge with strong glowing pulse aura.

#animation #shadow

Live preview Badges

Heartbeat Badge

Badge that beats like a heart.

#animation #transform

Live preview Badges

Spin Badge

Badge that spins around its center.

#animation #transform

Live preview Badges

Wobble Badge

Badge that wobbles side to side.

#animation #transform

Live preview Badges

Candy Cane Badge

Candy-cane badge with diagonal red-white stripes.

#gradient #shadow #border

Live preview Badges

Certified Ribbon Badge

Certified badge styled like an official ribbon stamp.

#transform #shadow #border

Live preview Badges

Dismissible Chip

Material-style chip with X dismiss button.

#hover #border

Live preview Badges

Cloud Fly Badge

Fly.io cloud badge with red-magenta fly styling.

#gradient #shadow #border

Live preview Badges

Cloud GCP Badge

Google Cloud Platform badge with four-color split styling.

#gradient #shadow #border

Live preview Badges

Cloud Heroku Badge

Heroku cloud badge with purple-paper plane styling.

#gradient #shadow #border

Live preview Badges

Solid Blue Pill

Classic blue pill badge with white text.

Live preview Badges

Solid Stone Pill

Warm stone-toned pill badge.

Live preview Badges

Solid Violet Pill

Vibrant violet pill badge.

Live preview Badges

Corner Sale Ribbon

Diagonal corner ribbon with sale text overlay.

#transform #shadow #border

Live preview Badges

Cyber Glitch Grid Badge

Magenta/cyan glitchy badge with a dark grid overlay.

#gradient #shadow #border

Live preview Badges

Debossed Badge

Debossed badge with inset text effect.

#gradient #shadow #border

Live preview Badges

Deco Dashed Border Badge

Decorative badge with dashed border line.

#border

Live preview Badges

Deco Fringe Badge

Badge with fringe-strip bottom edge.

#gradient #shadow

Live preview Badges

Deco Stitch Cross Badge

Badge with cross-stitch pattern border accent.

#gradient #shadow #border

Live preview Badges

Desert Sand Badge

Sandy beige badge with subtle dune texture.

#gradient #shadow #border

Live preview Badges

Doc Spreadsheet Badge

Spreadsheet badge with grid pattern and green tone.

#gradient #shadow #border

Live preview Badges

Eco Bio Badge

Biodegradable badge with sprout glyph and green tone.

#gradient #shadow #border

Live preview Badges

Eco Recycle Badge

Recycle badge with triangular recycle arrows.

#gradient #shadow #border

Live preview Badges

Eco Wind Badge

Wind-energy badge with cyan turbine styling.

#gradient #shadow #border

Live preview Badges

Embossed Badge

Embossed badge with raised text effect.

#gradient #shadow #border

Live preview Badges

Exclusive Gold Badge

Gold exclusive badge with metallic sheen.

#gradient #transform #shadow

Live preview Badges

Forest Moss Badge

Mossy-textured badge with earthy green gradient.

#gradient #border

Live preview Badges

Framework Angular Badge

Angular framework badge with shield-shape red styling.

#gradient #shadow #border

Live preview Badges

Framework Deno Badge

Deno framework badge with dark-blue dinosaur styling.

#gradient #shadow #border

Live preview Badges

Framework Next Badge

Next.js framework badge with mono black-white styling.

#gradient #shadow #border

Live preview Badges

Framework React Badge

React framework badge with atom-orbit styling.

#gradient #shadow #border

Live preview Badges

BG Slide FX Badge

Animated badge with sliding gradient background.

#animation #gradient #shadow

Live preview Badges

Color Cycle FX Badge

Animated badge that cycles through hue rotations.

#animation #gradient #transform

Live preview Badges

Fill Flood FX Badge

Animated badge with flooding radial fill overlay.

#animation #gradient #transform

Live preview Badges

Hue Shift FX Badge

Animated badge with gentle hue-shift in/out oscillation.

#animation #gradient #transform

Live preview Badges

Letter Pop FX Badge

Animated badge with sequential letter pop animation.

#animation #gradient #shadow

Live preview Badges

Soft Pulse FX Badge

Animated badge with gentle soft-pulse scale animation.

#animation #gradient #transform

Live preview Badges

Rubber FX Badge

Animated badge with elastic rubber-band stretch.

#animation #gradient #transform

Live preview Badges

Shadow Grow FX Badge

Animated badge with growing drop shadow.

#animation #gradient #transform

Live preview Badges

Shadow Shrink FX Badge

Animated badge with shrinking shadow press effect.

#animation #gradient #transform

Live preview Badges

Swing FX Badge

Animated badge that swings like a pendulum from top anchor.

#animation #gradient #transform

Live preview Badges

Typing Loop FX Badge

Animated badge with looping typewriter cursor blink.

#animation #gradient #shadow

Live preview Badges

Garden Bumblebee Badge

Bumblebee-striped badge with yellow-black banding.

#gradient #shadow #border

Live preview Badges

Glow Edge Glass Badge

Glass badge with luminous glowing edge.

#shadow #border #filter

Live preview Badges

Pink Glass Badge

Frosted pink glass badge with soft glow.

#shadow #border #filter

Live preview Badges

Hue Rotate Pill

Pill that cycles through all hues via hue-rotate filter.

#animation #gradient #transform

Live preview Badges

Halloween Holiday Badge

Halloween-themed badge with orange and black.

#transform #shadow #border

Live preview Badges

Language CSS Badge

CSS language badge with blue paint-brush styling.

#gradient #shadow #border

Live preview Badges

Language Java Badge

Java language badge with coffee-cup red styling.

#gradient #shadow #border

Live preview Badges

Live Pulse Badge

A broadcast badge whose red dot sends out a fading ring on every beat.

#animation #transform #border