30 CSS Badges
Advertisement
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.
01 / 30
Upload Progress
CSS + JS 
A static 73% could be a live transfer or stalled. The shimmer moving through the bar means bytes are flowing; when it becomes a slow pulse, the transfer has stalled; when it stops, it's done. Three states, one animation property.
02 / 30
Typing Indicator
Pure CSS 
The three bouncing dots are the convention. Without the animation the badge could mean "typed recently" or "about to type." The motion defines the tense: present continuous, active right now.
03 / 30
Scrabble Tile
Pure CSS 
One letter, one number. The whole game fits in a square. Hover lifts each tile independently — the kind of small detail that makes a word feel played rather than typed.
04 / 30
Keycap Shortcut
CSS + JS 
A key is a physical object. Three stacked box-shadows form the edge — bottom face, outer drop, top highlight. Click any key and feel it go down. Cmd-K and friends, the way they were meant to look.
05 / 30
Transit Line Indicator
CSS + JS 
Wayfinding distilled. Bullet, name, live arrival, and a strip showing where you are on the line. Built to be read from across a platform — and the next-arrival time keeps counting down.
06 / 30
Origami Craft Endorsement
Pure CSS 
Paper folded along six creases, lit from the upper-left. A ribbon hangs beneath. Hover lifts the page to catch the fold angles — the lit facets brighten, the shadowed ones recede.
07 / 30
Hreflang Coverage
Pure CSS 
International SEO's most misunderstood tag. Shows the target locale, alternate version count, and — crucially — flags missing reciprocal links. Hreflang must be bidirectional or the entire cluster invalidates.
08 / 30
E-E-A-T Scorecard
Pure CSS 
Google's quality evaluator framework — Experience, Expertise, Authoritativeness, Trustworthiness. Composite score and a grade, with four animated bars showing per-dimension strength.
09 / 30
Crawl & Index Status
Pure CSS 
Googlebot visits and decides: indexed or not. But there are four states before "indexed," and most pages fail before the first one. This badge shows exactly where in the crawl pipeline a URL sits.
10 / 30
Schema Markup Type
Pure CSS 
Structured data is a contract between a page and Google's parser. The badge names the @type and lists which SERP features it unlocks — the difference between a plain blue link and a result with stars, FAQs, and how-to steps.
11 / 30
Search Intent Spectrum
Pure CSS 
Plots a keyword on the Informational / Navigational / Commercial / Transactional spectrum. Intent mismatch is one of the top reasons pages don't rank — this badge surfaces the right page type before a word is written.
12 / 30
Core Web Vitals
Pure CSS 
LCP, INP, CLS — the three real-world page-experience signals Google ranks on. Three SVG arcs draw to their verdict on load. Green / amber / red thresholds match Google's field-data classification.
13 / 30
ECG Heartbeat
CSS + JS 
Live BPM with a continuously scrolling waveform. Scroll speed equals beats per minute literally — change the duration and you change the rate. The badge and the data are the same thing.
14 / 30
Build Pipeline
CSS + JS 
CI/CD stage tracker with a spinning arc on the active step. Sequential steps light up — you know roughly how long remains by which step is spinning. Restarts automatically.
15 / 30
Countdown Ring
CSS + JS 
Ring depletes continuously in real time. Color shifts green → amber → red as the deadline approaches. The depletion rate is the data. A static badge cannot know what time it is.
16 / 30
Live Price Ticker
CSS + JS 
A static price is history; an animated price is now. Green or red flash on each update tells direction without comparison. Sparkline shows the recent walk. The animation IS the signal.
17 / 30
File Extension Badge
Pure CSS 
Two adjacent flex blocks — colored extension + white filename. Color is the identifier; nothing else is needed. Hover lifts the whole card off the surface the way you pick up a real file.
18 / 30
Dice Face
CSS + JS 
A fair die with six possible states. Click to roll — the pip positions are correct, the animation is physical, the number updates. One honest square doing exactly one honest job.
19 / 30
Signal Bars
Pure CSS 
Four rectangles of increasing height — possibly the most iconic data visualization ever designed. Confidence, signal, relevance — whatever the product needs. Hover fills all bars to maximum.
20 / 30
Reading Time Indicator
Pure CSS 
Three states — not started, in progress, done. A 2px bar at the bottom fills to 100% on hover so the user can see what completion looks like. Clean type, no decoration.
21 / 30
Aurora Status
Pure CSS 
Status pill that breathes. Four pools of color drift behind a frosted lens; their hues rotate continuously through the spectrum. For loading, streaming, thinking — when text alone is not enough.
22 / 30
Vaporwave Chrome
Pure CSS 
Release channel as marquee. Chrome lettering over a synthwave horizon, ticker tape reminding you exactly what kind of trouble you are in. The sun is striped. The grid recedes. The warning never stops scrolling.
23 / 30
Risograph Edition Label
Pure CSS 
Two-color riso print laid down by drum and squeegee. Pink and cyan with the deliberate misregistration that gives the process its hand. Hover widens the offset.
24 / 30
Wax Seal Authentication
CSS + JS 
Embossed oxblood wax disc over a written page, anchored by a gold-leaf monogram. Click the seal to press — the disc compresses, holds, releases. Drips peek out from the base.
25 / 30
Conference Lanyard
CSS + JS 
Physical badge with ambient sway, hanging from its own clip. Click flips it — front holds the role band and name, back holds the QR. Each card swings at a slightly different frequency.
26 / 30
Botanical Membership Tier
Pure CSS 
Membership tier grown as SVG flora — petals, leaves, and a budding center on warm paper. Hover sways the leaves outward and blooms the center. Italiana + Cormorant Garamond carry the names.
27 / 30
Cyberpunk Glitch Notification
CSS + JS 
Notification counter with perpetual chromatic aberration. Hover triggers a full RGB-split glitch storm; click scrambles the digits hex-style before settling. Scanline drifts top-to-bottom continuously.
28 / 30
Art Deco Medallion
Pure CSS 
Conic-gradient brass ring rotating against a slow ray pattern. Crest in Cinzel display type. Sweep of shine on hover, gentle lift on the whole medallion.
29 / 30
Brutalist Status Matrix
Pure CSS 
Monospaced status grid — operational, degraded, outage, maintenance, deploying, queued. Inverts on hover. Live pulse on healthy systems, blink on outages, scanline on deploys.
Advertisement
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
19 CSS Blockquote Designs
19
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
18 CSS Divider Collections
18
18 hand-coded CSS section-divider collections across eighteen design languages — editorial, brutalist, art deco, cyber, scientific, fantasy, retro, newspaper, playful, music, festive, corporate, sketch and more — 54 animated divider variants, each on its intended background.
css divider section divider horizontal rule
Responsive
20 CSS Tags & Chips Designs
20
20 hand-coded CSS tags and chips designs — removable filter, autocomplete input, status pulse, drag-to-reorder, marquee, undo and more. Semantic HTML, copy-paste ready.
css tags css chips filter chips
Responsive