CSS Badges & Tags Effects

A pink badge with a cyan corner dot that emits an expanding ring continuously, signaling a live notification.

An amber price tag with a notched right edge using clip-path — perfect for discount or sale labels.

A small green dot with an outward-pulsing ring paired with a status label — common in dashboards for 'online' state.

Solid blue pill badge in three example labels.

Translucent blue outline pill badge in three example labels.

Status pill tinted with color-mix() from one blue value — change the base color and the fill and border follow.

Filter chip with a dismiss button that spins and fills ocean on hover.

Physical-looking keyboard shortcut caps that depress on hover and read blue when active.

Filter chips with a built-in × that spins on hover, filling ocean when the chip is active.

Unread counter pinned to the corner of a carrier tile, with a background-colored ring so it stays legible over whatever sits beneath it.

Eight-point star made from two rounded squares at 45 degrees to each other — cheaper than a polygon and it keeps soft corners.

Rank chip whose ring is a conic gradient showing progress to the next tier, with the raw figures underneath in tabular numerals.

Swallow-tail flag cut from a single clip-path, the notch shallowing on hover so the tag squares off as it is picked out of a list.

Two-cell status badge with a neutral key against a coloured value, the pairing that makes a wall of these scannable down the value column alone.

Amber admission-ticket tag with punched notches and a perforated stub that tilts on hover.

Irregular blob of sealing wax with a highlight, an inner shadow and initials pressed into it, tilting when hovered.

Rating badge that shows the whole A-to-E scale rather than a single letter: the four grades this item did not earn stay short and desaturated while the awarded grade grows tall, keeps its full colour and takes a marker above it.

Notched banner cut with `clip-path` and given a drop-shadow rather than a box-shadow, so the shade follows the arrow instead of boxing it.

Scalloped seal cut with an eighteen-point `clip-path` and a tick drawn from two borders, so the whole mark is one element and no SVG.

Taxonomy links keyed by a colour dot rather than a filled background, so a row of them stays readable instead of turning into a paint chart.

Percentage-change pill with a border-drawn caret, tabular figures so a column of them stays aligned, and a tinted fill derived from the same hue as the arrow.

Retail swing-ticket silhouette — pointed left end cut by clip-path with a punched eyelet — tilting on hover as though hanging from the hole.

Sky-blue tag with three overlapping avatars and a +N counter that fan apart on hover.

Hard enamel pill inside a raised gold rim, with a gloss highlight that travels across the face every few seconds.

Truncated tag list where the +3 counter is not just a count: hovering the group collapses the counter to nothing and unrolls the three hidden tags out of the same space one after another, each widening from zero.

Lime sticker with a white die-cut border, slapped on at an angle, that springs upright on hover.

Day-streak pill carrying a two-layer flame whose outer and inner tongues flicker against each other out of phase.

Location tags cut with a chevron point on one end and a matching notch on the other so they interlock into a single path strip, and pointing at any segment lights it and every segment leading up to it in blue.

Teal status tag whose background doubles as a 72% progress bar and completes on hover.

Pleated prize rosette with two notched ribbon tails, the fluted disc turning slightly when the badge is hovered.

Set of chips that carry their own state: a checked chip flips to solid sky and slides a tick out from its left edge, and the moment any chip in the set is checked a Clear link widens into being at the end of the row.

On-air LIVE pill whose white dot throws two staggered expanding rings.

Dark pill wrapped in a thin violet-to-amber gradient rim that sweeps and glows on hover.