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 3 of 7

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.

Live preview Badges

Solid Red Pill

Flat solid red pill badge with crisp white text.

Live preview Badges

Solid Rose Pill

Rose pill badge with romantic tone.

Live preview Badges

Solid Slate Pill

Slate gray pill badge with neutral tone.

Live preview Badges

Solid Yellow Pill

Bright yellow pill with dark text contrast.

Live preview Badges

Solid Zinc Pill

Cool zinc gray pill badge.

Live preview Badges

Coming Soon Dots Badge

Coming soon badge with animated loading dots.

#animation #transform #border

Live preview Badges

Notification Count Badge

A bell with a counter that pops each time the number would change.

#animation #transform #border

Live preview Badges

Cyber Circuit Badge

Circuit-board pattern badge with copper trace lines.

#gradient #shadow #border

Live preview Badges

Cyber Matrix Badge

Matrix-style green-on-black badge with cascading digits.

#gradient #shadow #border

Live preview Badges

Cyber Pixel Badge

Pixelated retro-game badge with blocky stepped edges.

#shadow #border

Live preview Badges

Cyber Scanline Badge

Dark CRT-style badge with animated horizontal scan lines.

#animation #gradient #border

Live preview Badges

Database Mongo Badge

MongoDB database badge with green leaf styling.

#gradient #shadow #border

Live preview Badges

Database MySQL Badge

MySQL database badge with dolphin-blue styling.

#gradient #shadow #border

Live preview Badges

Database Postgres Badge

PostgreSQL database badge with elephant navy styling.

#gradient #shadow #border

Live preview Badges

Database Redis Badge

Redis database badge with red-square stack styling.

#gradient #shadow #border

Live preview Badges

Database Supabase Badge

Supabase database badge with lightning-emerald styling.

#gradient #shadow #border

Live preview Badges

Deco Dotted Border Badge

Decorative badge with dotted border line.

#border

Live preview Badges

Deco Double Border Badge

Decorative badge with double-line outer border.

#shadow #border

Live preview Badges

Deco Groove Border Badge

Decorative badge with 3D grooved border style.

#border

Live preview Badges

Deco Ridge Border Badge

Decorative badge with raised ridge border style.

#border

Live preview Badges

Deco Clip Corner Badge

Badge with two clipped corner triangles.

#gradient #shadow

Live preview Badges

Deco Corner Cut Badge

Decorative badge with diagonal-cut top-left corner.

#gradient #shadow

Live preview Badges

Deco Paper Torn Badge

Paper-badge with zigzag torn-paper bottom edge.

#gradient #shadow #filter

Live preview Badges

Deco Perforated Badge

Badge with perforated ticket-edge dots.

#gradient #border

Live preview Badges

Deco Scallop Badge

Badge with scalloped bottom edge curves.

#gradient #shadow

Live preview Badges

Deco Slanted Badge

Badge skewed at an angle for dynamic slanted feel.

#gradient #transform #shadow

Live preview Badges

Deco Stamp Edge Badge

Postage-stamp badge with serrated edge.

#gradient #shadow

Live preview Badges

Deco Stitch Dashed Badge

Badge with dashed stitching-style border in two layers.

#gradient #shadow #border

Live preview Badges

Deco Tape Strip Badge

Tape-strip badge with semi-transparent torn edges.

#transform #shadow #border

Live preview Badges

Deco Ticket Edge Badge

Ticket-stub badge with semicircle notches on sides.

#gradient #transform #shadow

Live preview Badges

Deco Zigzag Badge

Badge with zigzag top and bottom edges.

#gradient

Live preview Badges

Desert Cactus Badge

Cactus-green badge with rounded lobe styling.

#gradient #shadow #border

Live preview Badges

Desert Sun Badge

Sun-gold badge with warm radiant glow.

#gradient #shadow #border

Live preview Badges

Diamond Sparkle Badge

Diamond badge with cyan sparkle and frosted finish.

#animation #gradient #shadow

Live preview Badges

Doc Audio Badge

Audio document badge with equalizer bar styling.

#gradient #shadow #border

Live preview Badges

Doc Code Badge

Code file badge with chevron brackets and dark tone.

#gradient #shadow #border

Live preview Badges

Doc Folder Badge

Folder document badge with tabbed-folder shape and yellow tone.

#gradient #shadow #border

Live preview Badges

Doc Image Badge

Image document badge with picture glyph and pink tone.

#gradient #shadow #border

Live preview Badges

Doc PDF Badge

PDF document badge with red tag and folded corner.

#gradient #shadow #border

Live preview Badges

Doc PowerPoint Badge

PowerPoint document badge with orange PPT tag.

#gradient #shadow #border

Live preview Badges

Doc Presentation Badge

Presentation badge with screen-rectangle icon and orange tone.

#gradient #shadow #border

Live preview Badges

Doc Text Badge

Plain-text document badge with light gray tone.

#gradient #shadow #border

Live preview Badges

Doc Video Badge

Video document badge with play-triangle glyph.

#gradient #shadow #border

Live preview Badges

Doc Word Badge

Word document badge with blue W-styling.

#gradient #shadow #border

Live preview Badges

Doc ZIP Badge

Archive ZIP badge with zipper dotted accent.

#gradient #shadow #border

Live preview Badges

Eco Carbon Neutral Badge

Carbon-neutral badge with green footprint styling.

#gradient #shadow #border

Live preview Badges

Eco Fairtrade Badge

Fairtrade-certified badge with two-tone green/blue styling.

#gradient #shadow #border

Live preview Badges

Eco Leaf Badge

Eco badge with leaf glyph and green nature styling.

#gradient #shadow #border

Live preview Badges

Eco Organic Badge

Organic-certified badge with leaf glyph and natural green.

#gradient #shadow #border

Live preview Badges

Eco Solar Badge

Solar-energy badge with sun glyph and amber styling.

#gradient #shadow #border

Live preview Badges

Eco Water Drop Badge

Water-conservation badge with droplet glyph and blue tone.

#gradient #shadow #border

Live preview Badges

Featured Star Badge

Featured badge with a star accent and soft glow.

#shadow #border

Live preview Badges

Forest Leaf Badge

Leaf-shaped green badge with vein detail.

#gradient #shadow #border

Live preview Badges

Forest Pine Badge

Deep-pine-green badge with subtle needle texture.

#gradient #shadow #border

Live preview Badges

Framework Bun Badge

Bun framework badge with warm-cream bun styling.

#gradient #shadow #border

Live preview Badges

Framework Node Badge

Node.js framework badge with green hexagon styling.

#gradient #shadow #border

Live preview Badges

Framework Svelte Badge

Svelte framework badge with orange flame styling.

#gradient #shadow #border

Live preview Badges

Framework Tailwind Badge

Tailwind CSS framework badge with cyan wind-wave styling.

#gradient #shadow #border

Live preview Badges

Framework Vue Badge

Vue framework badge with V-shape green styling.

#gradient #shadow #border

Live preview Badges

Free Outline Badge

Outlined free badge with dashed border and hover fill.

#hover #border

Live preview Badges

Bob Soft FX Badge

Animated badge with gentle vertical bobbing motion.

#animation #gradient #transform

Live preview Badges

Boing FX Badge

Animated badge that bounces up and down like a spring.

#animation #gradient #transform

Live preview Badges

Border March FX Badge

Animated badge with marching dashed border animation.

#animation #gradient #shadow

Live preview Badges

CRT Flicker FX Badge

Animated badge with CRT-monitor flicker effect.

#animation #gradient #shadow

Live preview Badges

Dashed Flow FX Badge

Animated badge with flowing dashed border line.

#animation #gradient #shadow

Live preview Badges

Fill Bottom Up FX Badge

Animated badge with rising fill from bottom to top.

#animation #gradient #transform

Live preview Badges

Fill Radial FX Badge

Animated badge with pulsing radial fill overlay.

#animation #gradient #shadow

Live preview Badges

Fill Sweep FX Badge

Animated badge with sweeping left-to-right fill overlay.

#animation #gradient #transform

Live preview Badges

Firework FX Badge

Animated badge with firework-burst radial expansion.

#animation #gradient #transform

Live preview Badges

Flash FX Badge

Animated badge with rapid flash opacity transition.

#animation #gradient #shadow

Live preview Badges

Glitch Slice FX Badge

Animated badge with horizontal slice-glitch distortion.

#animation #transform #shadow