30 CSS Badges

A CSS badge is a small visual component that signals state, identity, or progress — verification, rank, status, count, or live data. These 30 hand-coded badges cover collectibles, status pills, certifications, notifications, membership tiers, and real-time data displays like price tickers, countdowns, and ECG traces. Each badge is fully scoped with a unique CSS class prefix so you can paste any two into the same project with zero style collisions. Copy the markup, swap the content, ship.

30 unique badges 19 Pure CSS 11 CSS + JS 100% copy-paste ready Published May 13, 2026

01 / 30

Upload Progress

CSS + JS

A static 73% could be a live transfer or stalled.

Live Demo Try it

02 / 30

Typing Indicator

Pure CSS

The three bouncing dots are the convention.

Live Demo Try it

03 / 30

Scrabble Tile

Pure CSS

One letter, one number.

Live Demo Try it

04 / 30

Keycap Shortcut

CSS + JS

A key is a physical object.

Live Demo Try it

05 / 30

Transit Line Indicator

CSS + JS

Wayfinding distilled.

Live Demo Try it

06 / 30

Origami Craft Endorsement

Pure CSS

Paper folded along six creases, lit from the upper-left.

Live Demo Try it

07 / 30

Hreflang Coverage

Pure CSS

International SEO's most misunderstood tag.

Live Demo Try it

08 / 30

E-E-A-T Scorecard

Pure CSS

Google's quality evaluator framework — Experience, Expertise, Authoritativeness, Trustworthiness.

Live Demo Try it

09 / 30

Crawl & Index Status

Pure CSS

Googlebot visits and decides: indexed or not.

Live Demo Try it

10 / 30

Schema Markup Type

Pure CSS

Structured data is a contract between a page and Google's parser.

Live Demo Try it

11 / 30

Search Intent Spectrum

Pure CSS

Plots a keyword on the Informational / Navigational / Commercial / Transactional spectrum.

Live Demo Try it

12 / 30

Core Web Vitals

Pure CSS

LCP, INP, CLS — the three real-world page-experience signals Google ranks on.

Live Demo Try it

13 / 30

ECG Heartbeat

CSS + JS

Live BPM with a continuously scrolling waveform.

Live Demo Try it

14 / 30

Build Pipeline

CSS + JS

CI/CD stage tracker with a spinning arc on the active step.

Live Demo Try it

15 / 30

Countdown Ring

CSS + JS

Ring depletes continuously in real time.

Live Demo Try it

16 / 30

Live Price Ticker

CSS + JS

A static price is history; an animated price is now.

Live Demo Try it

17 / 30

File Extension Badge

Pure CSS

Two adjacent flex blocks — colored extension + white filename.

Live Demo Try it

18 / 30

Dice Face

CSS + JS

A fair die with six possible states.

Live Demo Try it

19 / 30

Signal Bars

Pure CSS

Four rectangles of increasing height — possibly the most iconic data visualization ever designed.

Live Demo Try it

20 / 30

Reading Time Indicator

Pure CSS

Three states — not started, in progress, done.

Live Demo Try it

21 / 30

Aurora Status

Pure CSS

Status pill that breathes.

Live Demo Try it

22 / 30

Vaporwave Chrome

Pure CSS

Release channel as marquee.

Live Demo Try it

23 / 30

Risograph Edition Label

Pure CSS

Two-color riso print laid down by drum and squeegee.

Live Demo Try it

24 / 30

Wax Seal Authentication

CSS + JS

Embossed oxblood wax disc over a written page, anchored by a gold-leaf monogram.

Live Demo Try it

25 / 30

Conference Lanyard

CSS + JS

Physical badge with ambient sway, hanging from its own clip.

Live Demo Try it

26 / 30

Botanical Membership Tier

Pure CSS

Membership tier grown as SVG flora — petals, leaves, and a budding center on warm paper.

Live Demo Try it

27 / 30

Cyberpunk Glitch Notification

CSS + JS

Notification counter with perpetual chromatic aberration.

Live Demo Try it

28 / 30

Art Deco Medallion

Pure CSS

Conic-gradient brass ring rotating against a slow ray pattern.

Live Demo Try it

29 / 30

Brutalist Status Matrix

Pure CSS

Monospaced status grid — operational, degraded, outage, maintenance, deploying, queued.

Live Demo Try it

30 / 30

Holographic Collectible

Pure CSS

Pentagonal collectible badge with a cursor-tracked conic-gradient foil and a tier glyph.

Live Demo Try it

FAQ

Frequently asked questions

What is a CSS badge?

A badge is a small, opinionated promise — that something has been verified, ranked, named, or scheduled. CSS badges include collectible tiers (holographic, mythic), status indicators (operational, degraded, outage), achievement medallions, real-time signals (live price tickers, countdowns, ECG, build progress), credentials (conference lanyards, wax seals), membership tiers, and notifications. Each badge encodes one piece of information in a way the eye can read at a glance — often before the user has finished reading the surrounding text.

How do I keep multiple badges from clashing in the same project?

Every demo in this collection uses a unique semantic class prefix (e.g. .holo-, .brut-, .deco-, .wax-, .vapor-). No demo shares a prefix with any other, and no demo uses generic class names like .badge or .card. Paste any two demos into the same page and they cannot collide. The pattern is documented in CLAUDE.md — extend it by picking a new short kebab prefix when you write your own badge.

Why is the animation justified on some badges but not others?

Several demos use continuous animation (live price, countdown ring, build pipeline, ECG, aurora, vaporwave marquee, typing dots, upload shimmer, crawl pulse). Each one passed the test: remove the animation, does the badge lose information — not aesthetics, but actual data? A static price loses direction-of-change. A static countdown loses urgency. A static ECG becomes a historical chart. The rest of the badges respond only to hover or click. None animate decoratively.

Can I use these without JavaScript?

Nineteen of the thirty are pure CSS — including all the marquee animations, hover transitions, gradient effects, and SVG flora/medallions. Eleven carry small JS helpers, mostly for cursor tracking (Holographic), click-to-press (Wax Seal, Keycap, Dice), live data simulation (Live Price, Countdown, Build Pipeline, ECG, Upload, Transit), or card flipping (Conference Lanyard, Cyberpunk). The visual chrome on the live-data demos is pure CSS — strip the JS and you get a beautifully styled static version with hardcoded values.

How do I adapt these to my data?

Each demo is a structural template — keep the markup hierarchy, replace the content. Most demos use CSS custom properties for the dominant colors so retoning is one variable change. The display fonts come from Google Fonts (Fraunces, Cinzel, Geist Mono, VT323, Major Mono Display, JetBrains Mono, Cormorant Garamond, Italiana, Bricolage Grotesque). Keep the @import or substitute your own type stack.

Related collections

14 CSS Banners & Alerts

Hand-coded CSS banner and alert patterns covering every notification surface a real product needs — dismissible alerts, sticky announcements, semantic status alerts, cookie consent, form validation, toasts, live-update banners, and promotional hero banners. Pure CSS plus scoped JS — no framework, semantic HTML, accessibility-first, copy-paste ready.

banner alert notification Responsive

19 CSS Blockquote Designs

19 hand-coded CSS blockquote designs — pull quotes, testimonials, speech bubbles, tweet style, newspaper drop-caps, code comments and more. Semantic HTML, copy-paste ready.

blockquote css blockquote pull quote Responsive

12 CSS Code Blocks

Twelve hand-coded CSS code block patterns covering every developer surface: minimalist dark and light modes, a Mac terminal CSS code block with traffic-light chrome, a CSS code block with copy button, a CSS code block with line numbers driven by counter-increment, a mobile-responsive overflow / word-wrap pair, neon glow, a glassmorphism code block, inline <code> pill styling, neumorphic embedded, split-pane code plus live preview, and a pure-CSS expandable wrapper. Accessible, mobile-first, scoped per-demo classes, MIT-licensed.

css code block css code block with copy button css code block with line numbers Responsive