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

Live preview Badges

Mirror Badge

Mirror-finish badge with reflective gradient.

#gradient #shadow #border

Live preview Badges

Modern Pill Badge

Modern minimalist pill badge with subtle shadow.

#shadow

Live preview Badges

Neon Pink Badge

Dark badge with glowing pink neon glow.

#animation #transform #shadow

Live preview Badges

Colored Neumorphic Badge

Neumorphic badge with colored accent.

#shadow

Live preview Badges

Dark Neumorphic Badge

Dark mode neumorphic badge with subtle shadows.

#shadow

Live preview Badges

Neumorphic Flat Badge

Soft neumorphic badge with dual shadows.

#shadow

Live preview Badges

Pink Neumorphic Badge

Pink-tinted neumorphic badge.

#shadow

Live preview Badges

Round Neumorphic Badge

Fully circular neumorphic badge.

#shadow

Live preview Badges

Notification Count 1

Red circular notification count badge showing number one.

#shadow #border

Live preview Badges

Notification 99+

Notification badge showing 99+ with red pulse.

#animation #gradient #shadow

Live preview Badges

Bouncing Notification

Notification badge with playful bounce animation.

#animation #transform #shadow

Live preview Badges

Counter Badge

Dark counter badge for shopping cart counts.

#shadow #border

Live preview Badges

Unread Indicator

Small unread dot indicator for messaging interfaces.

#animation #shadow

Live preview Badges

Ocean Deep Badge

Deep-ocean navy badge with dark abyss feel.

#gradient #shadow #border

Live preview Badges

Ocean Foam Badge

Light sea-foam badge with airy pale-cyan styling.

#gradient #shadow #border

Live preview Badges

Ocean Wave Badge

Blue ocean badge with animated wavy accent line.

#animation #gradient #shadow

Live preview Badges

OKLCH Tone Scale Badges

Six badges built from one hue by walking OKLCH lightness in even steps.

#oklch #palette #design-tokens

Live preview Badges

Outline Amber Pill

Transparent pill with amber border and amber text.

#border

Live preview Badges

Outline Blue Pill

Transparent pill with blue border and blue text.

#border

Live preview Badges

Outline Green Pill

Transparent pill with green border and green text.

#border

Live preview Badges

Outline Purple Pill

Transparent pill with purple border and text.

#border

Live preview Badges

Outline Red Pill

Transparent pill with red border and red text.

#border

Live preview Badges

Pastel Amber Pill

Soft pastel amber pill.

#border

Live preview Badges

Pastel Blue Pill

Soft pastel blue pill.

#border

Live preview Badges

Pastel Cyan Pill

Soft pastel cyan pill.

#border

Live preview Badges

Pastel Emerald Pill

Soft pastel emerald pill.

#border

Live preview Badges

Pastel Fuchsia Pill

Soft pastel fuchsia pill.

#border

Live preview Badges

Pastel Indigo Pill

Soft pastel indigo pill.

#border

Live preview Badges

Pastel Lime Pill

Soft pastel lime pill.

#border

Live preview Badges

Pastel Pink Pill

Soft pastel pink pill with pink text.

#border

Live preview Badges

Pastel Purple Pill

Soft pastel purple pill.

#border

Live preview Badges

Pastel Rose Pill

Soft pastel rose pill with deep rose text.

#border

Live preview Badges

Pastel Sky Pill

Soft pastel sky pill.

#border

Live preview Badges

Pastel Teal Pill

Soft pastel teal pill.

#border

Live preview Badges

Pastel Violet Pill

Soft pastel violet pill.

#border

Live preview Badges

Payment Amex Badge

American Express payment badge with blue tile styling.

#gradient #shadow #border

Live preview Badges

Payment Apple Badge

Apple Pay badge with mono black styling and apple glyph.

#gradient #shadow #border

Live preview Badges

Payment Bitcoin Badge

Bitcoin payment badge with orange-B styling.

#gradient #shadow #border

Live preview Badges

Payment Crypto Badge

Crypto payment badge with golden Bitcoin-style accent.

#gradient #shadow #border

Live preview Badges

Payment Ethereum Badge

Ethereum payment badge with diamond-glyph dark styling.

#gradient #shadow #border

Live preview Badges

Payment Google Badge

Google Pay badge with multi-color G accent and white background.

#gradient #shadow #border

Live preview Badges

Payment Mastercard Badge

Mastercard payment badge with overlapping red-yellow circles.

#gradient #shadow #border

Live preview Badges

Payment PayPal Badge

PayPal payment badge with blue PP styling.

#gradient #shadow #border

Live preview Badges

Payment Stripe Badge

Stripe payment badge with indigo S styling.

#gradient #shadow #border

Live preview Badges

Payment Visa Badge

Visa payment badge with blue italic styling.

#gradient #shadow #border

Live preview Badges

Gradient Sweep Pill

Pill badge with animated gradient sweep across surface.

#animation #gradient #shadow

Live preview Badges

Plan Basic Badge

Basic-plan badge with calm blue styling.

#gradient #shadow #border

Live preview Badges

Plan Business Badge

Business-plan badge with indigo professional tone.

#gradient #shadow #border

Live preview Badges

Plan Enterprise Badge

Enterprise-plan badge with deep navy professional tone.

#gradient #shadow #border

Live preview Badges

Plan Free Badge

Free-plan badge with neutral gray styling.

#gradient #shadow #border

Live preview Badges

Plan Pro Badge

Pro-plan badge with purple premium styling.

#gradient #shadow #border

Live preview Badges

Plan Starter Badge

Starter-plan badge with fresh green styling.

#gradient #shadow #border

Live preview Badges

Plan Unlimited Badge

Unlimited-plan badge with infinite-loop accent.

#gradient #shadow #border

Live preview Badges

Platform Android Badge

Android platform badge with green robot accent.

#gradient #shadow #border

Live preview Badges

Platform Cross Badge

Cross-platform badge with multi-colored split styling.

#gradient #shadow #border

Live preview Badges

Platform Desktop Badge

Desktop platform badge with monitor glyph and slate tone.

#gradient #shadow #border

Live preview Badges

Platform iOS Badge

iOS platform badge with Apple-style silver gradient.

#gradient #shadow #border

Live preview Badges

Platform Linux Badge

Linux platform badge with penguin-friendly tuxedo tone.

#gradient #shadow #border

Live preview Badges

Platform macOS Badge

macOS platform badge with mono chrome styling.

#gradient #shadow #border

Live preview Badges

Platform Mobile Badge

Mobile platform badge with phone shape and purple tone.

#gradient #shadow #border

Live preview Badges

Platform Tablet Badge

Tablet platform badge with rounded-rectangle device icon.

#gradient #shadow #border

Live preview Badges

Platform Windows Badge

Windows platform badge with four-square flag pattern.

#gradient #shadow #border

Live preview Badges

Platinum Shine Badge

Platinum badge with bright reflective shine sweep.

#animation #gradient #transform

Live preview Badges

Popular Pulse Badge

Popular badge with pulsing ring to draw attention.

#animation #transform #border

Live preview Badges

Premium Gold Badge

Premium gold gradient badge with shimmering sheen.

#gradient #shadow #border

Live preview Badges

Priority Blocker Badge

Blocker-priority badge with stop-sign octagon styling.

#gradient #transform #shadow

Live preview Badges

Priority Critical Badge

Critical-priority badge with pulsing red alert style.

#animation #gradient #transform

Live preview Badges

Priority High Badge

High-priority badge with up-arrow chevron and orange tone.

#border

Live preview Badges

Priority Low Badge

Low-priority badge with single down-arrow chevron.

#border

Live preview Badges

Priority Medium Badge

Medium-priority badge with double-chevron indicator.

#gradient #border

Live preview Badges

Pro Gradient Badge

Animated gradient badge for pro-tier users.

#animation #gradient #shadow

Live preview Badges

Property Ring Badge

An animated angle property spins a gradient ring around a circular avatar badge.

#animation #gradient #at-property

Live preview Badges

Gold Award Ribbon

Award ribbon with gold medal and red tails.

#gradient #transform #shadow

Live preview Badges

Silver Award Ribbon

Silver award ribbon with blue tails.

#gradient #transform #shadow

Live preview Badges

Corner Ribbon Badge

A diagonal ribbon pinned across the top-right corner of a container.

#hover #gradient #transform

Live preview Badges

Corner Ribbon Right

Diagonal corner ribbon rotated to upper-right.

#transform #shadow #border

Live preview Badges

Flag Ribbon

Flag-shaped ribbon with pointed right end.

Live preview Badges

Tri-color Flag Ribbon

Three-color vertical flag ribbon stripes.

#border

Live preview Badges

Sash Ribbon

Diagonal sash ribbon with gold border.

#gradient #transform #shadow

Live preview Badges

Beta Tester Badge

Beta tester role badge with cyan styling.

#shadow #border

Live preview Badges

Contributor Role Badge

Contributor role badge with blue styling.

#shadow #border

Live preview Badges

Developer Role Badge

Developer role badge with dark tech styling.

#border

Live preview Badges

Early Adopter Badge

Early adopter role badge with limited edition styling.

#gradient #shadow #border

Live preview Badges

Expert Role Badge

Expert role badge with indigo styling.

#shadow #border

Live preview Badges

Founder Role Badge

Founder role badge with deep purple styling.

#transform #shadow #border

Live preview Badges

Mentor Role Badge

Mentor role badge with teal styling.

#shadow #border

Live preview Badges

Moderator Role Badge

Moderator role badge with green styling.

#transform #shadow #border

Live preview Badges

VIP Role Badge

VIP role badge with golden gradient.

#gradient #transform #shadow

Live preview Badges

Gear Seal

Seal shaped like a gear with eight teeth.

#shadow #filter

Live preview Badges

Government Seal

Government-style seal with embossed gold rim.

#gradient #transform #shadow

Live preview Badges

Blue Official Seal

Blue circular official seal with star burst border.

#transform #shadow #border

Live preview Badges

Black Wax Seal

Black wax seal with elegant dark finish.

#gradient #transform #shadow

Live preview Badges

Red Wax Seal

Circular red wax seal with embossed look.

#gradient #transform #shadow

Live preview Badges

Silver Wax Seal

Silver wax seal with cool metallic finish.

#gradient #transform #shadow