20 CSS Tags & Chips Designs
Advertisement
A CSS tag or chip is a compact pill-shaped element used for filters, labels, selections, statuses, and metadata. These 20 hand-coded designs are ready-to-ship chips for filter bars, tag inputs, status badges, and category selectors — copy the markup, drop into your UI, and ship.
01 / 20
Removable Pill
Pure CSS 
Three filter chips with × buttons that actually remove the chip — pure CSS via :has(:checked) hiding the parent. The canonical filter pattern, working without a single line of JS.
02 / 20
Magnetic Hover
Pure CSS 
On hover the chip text drifts toward the cursor edge via a CSS-only "magnet" trick — purely transition-based, no pointer math, no JS.
03 / 20
Sliding Border
Pure CSS 
A real @property-animated conic gradient traces around the chip on hover — true CSS angle animation, not the keyframes-on-position hack everyone else uses.
04 / 20
Liquid Fill
Pure CSS 
Outline chip whose interior fills with brand colour from left-to-right on hover. Text colour inverts at the fill boundary using mix-blend-mode: difference.
05 / 20
Stack of Three
Pure CSS 
Chip rendered as three stacked layers offset by 2px each — depth illusion. On hover the layers fan out diagonally. Pure CSS via two ::before/::after pseudo-elements.
06 / 20
Notch Chip
Pure CSS 
Chip with a triangular notch cut into the left edge using clip-path — a real shape, not a background trick. Reads as a luggage tag or boarding-pass entry.
07 / 20
Glassmorphic
Pure CSS 
Frosted-glass chip with backdrop-blur over a coloured page background. Translucent surface, white border, soft inner highlight.
08 / 20
Aurora Outline
Pure CSS 
Continuously rotating conic-gradient border (violet → pink → mint) using @property for true angle animation. The chip stays still, only the rim rotates. Honours prefers-reduced-motion.
09 / 20
Pixel Grid
Pure CSS 
Chip background is a tiny dotted CSS pattern reading as retro/print. On hover the dot density increases via background-size transition.
10 / 20
Brutalist Stamp
Pure CSS 
Hard-edged offset-shadow chip with mono font and a hot-pink shadow. Press collapses into the shadow on click. Brutalist design system fixture.
11 / 20
Gradient Edge
Pure CSS 
Solid dark chip whose only accent is a thin gradient line on the bottom edge — minimalism with a single unmistakable signal. Fades up on hover.
12 / 20
Status Pulse
Pure CSS 
Status chip with a coloured leading dot that pulses for live/active state. Different colours = different states (success, warning, error, info). The standard health-indicator pattern.
13 / 20
Drag to Reorder
Light JS 
Three chips that can be drag-reordered with real pointer math — no library. Keyboard accessible: Tab to focus, ←/→ to swap with neighbour. The full reorder pattern.
14 / 20
Tag Input
Light JS 
Type to add a chip; Backspace on empty input removes the last chip. Real autocomplete dropdown filtered live by input — the full filter-input pattern with aria-controls/expanded.
15 / 20
Remove with Undo
Light JS 
Click × to remove a chip — but a small Undo toast appears for 4 seconds before deletion is final. The pattern Gmail and Linear made standard.
16 / 20
Counter Chip
Light JS 
Chip with a number badge inside; click − / + to decrement/increment with aria-valuenow updated for screen readers. The Gmail label-count pattern.
17 / 20
Marquee Chip
Pure CSS 
When the chip text overflows its width, the text scrolls horizontally on hover like a stock ticker. Pause on focus. Pure CSS using a duplicated text trick.
18 / 20
Expandable Detail
Pure CSS 
Native <details>/<summary> chip that expands inline to reveal a description on click. Real semantic disclosure, not a tooltip — keyboard accessible by default.
19 / 20
Linked Group
Pure CSS 
Three connected chips sharing a single border with hairline dividers — like a segmented breadcrumb of tags. Hover lights individual segments.
Advertisement
Build your own
Tweak the exact look in our visual generators — no signup, instant copy-paste.
FAQ
Frequently asked questions
What's the difference between a tag and a chip?
Functionally there's no difference — both are compact, often-pill-shaped UI elements used for filters, labels, statuses, or metadata. Material Design popularised chip; Bootstrap and most CSS frameworks call them tags or badges. The patterns in this gallery work for either name.
How do I make a removable chip work without JavaScript?
Wrap the chip in a label containing a hidden checkbox plus your visible content, then use the modern CSS :has() pseudo-class on the parent: .chip:has(:checked) { display: none; }. When the user clicks the chip (which toggles the checkbox), the chip removes itself — no JS, fully accessible, the form sees nothing. Demo 01 (Removable Pill) shows the exact pattern.
Are these chips accessible to keyboard and screen readers?
Yes. Each demo uses real semantic elements: button for clickable controls, label/input for selectable chips, details/summary for expandable ones, ul/li for lists. ARIA attributes (aria-label, aria-expanded, aria-valuenow, aria-controls, aria-live) cover the dynamic states. Keyboard navigation and focus rings are explicit. Continuous animations honour prefers-reduced-motion.
Do these tag and chip designs need JavaScript?
Most don't — 15 of the 20 are pure CSS using :hover, :has(), :checked, conic gradients with @property, clip-path, and animation. The other 5 (drag-to-reorder, tag input with autocomplete, remove with undo, counter chip, and the lifecycle animation) include small self-contained JS snippets in the JS tab of the code panel.
Can I use these chips in React, Vue, or any other framework?
Yes. Every demo is plain HTML + CSS (with optional vanilla JS) and has no dependencies. Drop the markup into React (using className), Vue, Svelte, Astro or static HTML — the styles work as-is. MIT licensed.
Related collections
30 CSS Badges
30
30 hand-coded CSS badges spanning collectibles, status indicators, certifications, notifications, membership tiers, and live-data displays. Upload progress, typing indicator, scrabble tile, keycap shortcut, transit indicator, origami medal, hreflang, E-E-A-T, crawl status, schema, search intent, core web vitals, ECG, build pipeline, countdown, live price, file extension, dice, signal bars, reading time, aurora, vaporwave, risograph, wax seal, conference lanyard, botanical tier, cyberpunk glitch, art deco, brutalist status, holographic.
css badge badge design upload progress
Responsive
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