Live preview Avatars
Copper Verified Badge Avatar
A copper check badge sits in the corner and pops when the avatar is hovered.
#badge CSS effects
23 free, pure-CSS effects match the "badge" tag. Each is copy-ready and needs no library or build step.
Live preview Accordions
Gear Release Accordion
Version rows expand into change notes marked by added, fixed and changed dots.
Live preview Avatars
Meadow Notched Corner Avatar
A square corner is clipped out of the avatar so a plan chip nests perfectly inside.
Live preview Avatars
Mica Rank Pill Avatar
A leaderboard rank pill hangs under the avatar with a sliding metal sheen.
Live preview Tabs
Pylon Filter Tabs
A pylon mast rises over the active filter and the chip list underneath swaps.
Live preview Accordions
Granite Counter Accordion
Every row carries a count badge and only one section stays open at a time.
Live preview Accordions
Lagoon Alerts Accordion
A notification tray whose day groups fold away with their unread markers.
Live preview Accordions
Prairie Key Accordion
Keyboard shortcut badges sit in the header and press down while open.
Live preview Alerts
Dune Chip Alert
A single line pill notice led by a status chip that catches a passing glint of light.
Live preview Alerts
Opal Badge Alert
The notice carries an unread counter badge that pops on a repeating rhythm.
Live preview Avatars
Savanna Badge Corner Set
One avatar shown four times so every badge corner placement can be compared.
Live preview Avatars
Tether Social Handle Avatar
A drawn camera badge pulses at the corner and rights itself when the avatar is hovered.
Live preview Avatars
Topaz Notification Count Avatar
An unread counter badge nudges itself every few seconds to draw the eye.
Live preview Marquees
Marble Breaking Bar
A pinned pulsing live badge sits beside the scrolling breaking news sentence.
Live preview Marquees
Tundra Credential Belt
Certification badges with tick marks pass by like an accreditation footer strip.
Live preview Tabs
Copper Badge Tabs
Each tab carries a count badge and the active one pulses in warm copper.
Live preview Tabs
Ratchet Account Type Tabs
A pawl steps across a toothed rack to pick between two account types.
Live preview Tables
Coil Shipping Rates
A weight by zone rate grid where the cheapest option in the sheet wears a tilted best tag.
Live preview Tables
Jade Status Pills
Each row ends with a status pill and the live one keeps a soft pulsing dot.
Live preview Tables
Lattice Endpoint List
An API route list with colour coded method badges under a slowly weaving lattice header.
Live preview Tables
Shaft File Manifest
A file listing where the extension sits in a coloured tile that tips forward under the pointer.
Live preview Tables
Verge Grade Shields
Letter grades sit inside clipped shield badges that cool down as the score nears the pass line.
Live preview Timelines
Mesa Year Bands
Year chips break the rail into bands so a long history stays readable.