Playground

Playground · 30 demos

CSS Badges Playground

Pick any demo to open it in a live, side-by-side editor. Tweak the HTML, CSS or JS and see your changes render instantly. Reset any time to return to the original.

Or browse the full CSS Badges collection for the gallery view with code panels.

Upload Progress

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.

Typing Indicator

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.

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.

Keycap Shortcut

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.

Transit Line Indicator

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.

Origami Craft Endorsement

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.

Hreflang Coverage

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.

E-E-A-T Scorecard

Google's quality evaluator framework — Experience, Expertise, Authoritativeness, Trustworthiness. Composite score and a grade, with four animated bars showing per-dimension strength.

Crawl & Index Status

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.

Schema Markup Type

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.

Search Intent Spectrum

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.

Core Web Vitals

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.

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.

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.

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.

Live Price Ticker

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.

File Extension Badge

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.

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.

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.

Reading Time Indicator

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.

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.

Vaporwave Chrome

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.

Risograph Edition Label

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.

Wax Seal Authentication

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.

Conference Lanyard

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.

Botanical Membership Tier

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.

Cyberpunk Glitch Notification

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.

Art Deco Medallion

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.

Brutalist Status Matrix

Monospaced status grid — operational, degraded, outage, maintenance, deploying, queued. Inverts on hover. Live pulse on healthy systems, blink on outages, scanline on deploys.

Holographic Collectible

Pentagonal collectible badge with a cursor-tracked conic-gradient foil and a tier glyph. The Mythic tier carries its own ambient pulse — visible across the room.