GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

Status Badge Design UI — 9 CSS Ideas to Copy

· Godrich · 9 items · 10 min read

FeedbackSCSSCSS onlyAutoplayDashboardNotifications

This status badge design ui roundup turns a small detail — one dot, one label — into instant feedback: online or away, urgent or not, verified or plain.

Status pill indicator (online/away/busy/offline)01 status-pill-online-offline-away-busy Removable tag chip02 tag-chip-remove-button Priority label badge (low/medium/high/urgent)03 priority-label-badge-levels Corner ribbon fold-unfurl04 corner-ribbon-fold-unfurl Notification dot double-pulse05 notification-dot-pulse-ring Tech-stack tag cloud06 tech-stack-tag-cloud Achievement badge unlock animation07 achievement-badge-unlock Premium / verified badge flip08 premium-verified-badge-flip Countdown expiry chip09 countdown-expiry-chip-flip

Auto-plays · click a tile to jump to its section · all nine in one zip

These nine follow the order in which a real product shows them, not popularity. You log in and see a teammate's online status (01), pick and remove interest tags (02), and set a task's priority (03). Browsing turns up a sale ribbon (04) and a new notification dot (05) that stays put instead of sliding away like a css toast notification; your profile collects a tech-stack cloud (06), a freshly unlocked achievement (07), and a verified badge (08); and a coupon's countdown (09) closes things out. What happens after a badge lands, judging the input itself, is Form Validation CSS Animations, and teaching a first-time visitor what that badge means is collected in Onboarding UI Design.

01Status pill indicator (online/away/busy/offline)

What you see in this css badge design

A ring hidden behind the online dot expands once via opacity and scale, while the other three states sit still, differing only in color. A second ::after ripple follows the dot ring a third of a cycle later and briefly tints the pill the same green, announcing the state change in two layers.

Status pill indicator (online/away/busy/offline)
Open in a new tab

01 · Status pill indicator (online/away/busy/offline) — Measured area 3.128% · moving frames 16/23Original by GODRICH · SCSS and React ship in the zip · See the password

opacity+scale ring::before무대 paper

Where to look in the code

.pill--online .dot::before {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid $color;
  opacity: 0;
  transform: scale(.6);
}
.stage.is-demo .pill--online .dot::before {
  animation: ping $duration $easing infinite;
}
@keyframes ping {
  0% { opacity: .55; transform: scale(.6); }
  70%, 100% { opacity: 0; transform: scale(2.1); }
}

02Removable tag chip

What happens on screen

Clicking the × actually shrinks and removes a chip via scale and opacity, and the demo loops that same motion on its own. As the chip shrinks, an ::after border ring spreads outward from the same spot, leaving an afterglow-like ripple where the chip stood.

Removable tag chip
Open in a new tab

02 · Removable tag chip — Measured area 2.362% · moving frames 8/23Original by GODRICH · SCSS and React ship in the zip · See the password

scale+opacity실제 클릭 제거transitionend

How to read the code

.chip--gone {
  transition: transform $dur-quick $easing, opacity $dur-quick $easing;
  transform: scale(.6);
  opacity: 0;
}
.stage.is-demo .chip--demo {
  animation: chip-cycle $duration $easing infinite;
}
@keyframes chip-cycle {
  0%, 38% { transform: scale(1); opacity: 1; }
  55%, 78% { transform: scale(.55); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

03Priority label badge (low/medium/high/urgent)

What moves

Only the urgent label flashes via opacity and scale, so it's the first thing you notice among labels that differ only in color. At the deepest flash, an ::after red ring ripples outward past the label edge and the text lightens for a beat, stacking color on top of motion to insist the warning repeats.

Priority label badge (low/medium/high/urgent)
Open in a new tab

03 · Priority label badge (low/medium/high/urgent) — Measured area 1.069% · moving frames 9/23Original by GODRICH · SCSS and React ship in the zip · See the password

opacity+scale flashflag Phosphor duotone정적 3단+동적 1단

What to change

.label--urgent {
  background: $error-soft;
  color: $color;
}
.stage.is-demo .label--urgent {
  animation: urgent-flash $duration $easing infinite;
}
@keyframes urgent-flash {
  0%, 40% { opacity: 1; transform: scale(1); }
  55% { opacity: .5; transform: scale(1.05); }
  70%, 100% { opacity: 1; transform: scale(1); }
}

04Corner ribbon fold-unfurl

What you see

A folded ribbon drops open from the top edge via scaleY around a top transform-origin, then rolls back up — a different move from the light-sweep ribbon in another post. The moment it settles, a coral ring spreads out along its border and the ribbon background lightens briefly before returning, confirming the landing twice.

Corner ribbon fold-unfurl
Open in a new tab

04 · Corner ribbon fold-unfurl — Measured area 1.443% · moving frames 11/23Original by GODRICH · SCSS and React ship in the zip · See the password

scaleY unfurltransform-origin: topclip-path polygon

Where to look in the code

.ribbon {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
  transform: scaleY(0) rotate(0deg);
  transform-origin: top center;
}
.stage.is-demo .ribbon {
  animation: unfurl $duration $easing infinite;
}
@keyframes unfurl {
  0%, 8% { transform: scaleY(0) rotate(0deg); }
  30% { transform: scaleY(1.06) rotate(-2deg); }
  42%, 78% { transform: scaleY(1) rotate(0deg); }
  92%, 100% { transform: scaleY(0) rotate(0deg); }
}

05Notification dot double-pulse

What happens on screen

The icon stays still while the corner dot springs twice via scale, reading like two messages landing back to back. On the second spring the dot lightens one tone and a third ripple ring trails the first two, layering arrival upon arrival.

Notification dot double-pulse
Open in a new tab

05 · Notification dot double-pulse — Measured area 0.648% · moving frames 9/23Original by GODRICH · SCSS and React ship in the zip · See the password

scale 더블 스프링@keyframes double-ring무대 ink

How to read the code

.dot {
  background: $color;
  box-shadow: 0 0 0 2px $stage-ink;
}
.stage.is-demo .dot {
  animation: double-pulse $duration $easing infinite;
}
.stage.is-demo .dot__ring {
  animation: double-ring $duration $easing infinite;
}
@keyframes double-pulse {
  0%, 100% { transform: scale(1); }
  8%, 24% { transform: scale(1.35); }
  16%, 32% { transform: scale(1); }
}
@keyframes double-ring {
  0%, 6% { opacity: 0; transform: scale(1); }
  20% { opacity: .5; transform: scale(2.4); }
  34% { opacity: 0; transform: scale(2.6); }
  100% { opacity: 0; transform: scale(1); }
}

06Tech-stack tag cloud

What moves

Six skill tags rise and fade via opacity and translateY in sequence, driven entirely by per-tag delay values.

Tech-stack tag cloud
Open in a new tab

06 · Tech-stack tag cloud — Measured area 8.515% · moving frames 18/23Original by GODRICH · SCSS and React ship in the zip · See the password

opacity+translateY staggeranimation-delay다크 무대

What to change

.cloud li {
  transform: translateY(10px);
  opacity: 0;
}
.stage.is-demo .cloud li {
  animation: rise $duration $easing infinite;
  animation-delay: calc(var(--i) * 90ms);
}
@keyframes rise {
  0% { opacity: 0; transform: translateY(10px); }
  22%, 70% { opacity: 1; transform: translateY(0); }
  92%, 100% { opacity: 0; transform: translateY(-6px); }
}

07Achievement badge unlock animation

What you see

A dulled trophy springs back to full color via scale, and a diagonal shine sweeps across it once to mark the moment.

Achievement badge unlock animation
Open in a new tab

07 · Achievement badge unlock animation — Measured area 7.692% · moving frames 13/23Original by GODRICH · SCSS and React ship in the zip · See the password

filter grayscale→colorscale bounceshine sweep translateX

Where to look in the code

.badge {
  filter: grayscale(1) brightness(.85);
  transform: scale(.85);
}
.stage.is-demo .badge {
  animation: unlock $duration $easing infinite;
}
@keyframes unlock {
  0%, 30% { transform: scale(.85); filter: grayscale(1) brightness(.85); }
  55% { transform: scale(1.12); filter: grayscale(0) brightness(1); }
  70% { transform: scale(.96); }
  82%, 100% { transform: scale(1); filter: grayscale(0) brightness(1); }
}

08Premium / verified badge flip

What happens on screen

The whole card spins in 3D via rotateY, alternating between a gold Premium face and a blue Verified face.

Premium / verified badge flip
Open in a new tab

08 · Premium / verified badge flip — Measured area 4.885% · moving frames 7/23Original by GODRICH · SCSS and React ship in the zip · See the password

rotateY 3D flipbackface-visibilityperspective

How to read the code

.flip__inner {
  transform-style: preserve-3d;
}
.flip__face {
  backface-visibility: hidden;
}
.flip__face--back {
  transform: rotateY(180deg);
}
.stage.is-demo .flip__inner {
  animation: flip $duration $easing infinite;
}
@keyframes flip {
  0%, 40% { transform: rotateY(0deg); }
  55%, 85% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}

09Countdown expiry chip

What moves

Ten digits stack vertically and step down one at a time via translateY, reading like a mechanical flip counter.

Countdown expiry chip
Open in a new tab

09 · Countdown expiry chip — Measured area 3.926% · moving frames 7/23Original by GODRICH · SCSS and React ship in the zip · See the password

translateY steps(10)@keyframes tickoverflow: hidden window

What to change

.chip__digit {
  width: 18px; height: 26px;
  overflow: hidden;
}
.chip__digit-track span {
  height: 26px; line-height: 26px;
}
.stage.is-demo .chip__digit-track {
  animation: tick $duration $easing infinite;
}
@keyframes tick {
  0% { transform: translateY(0); }
  100% { transform: translateY(-260px); }
}

Where it breaks — a digit stuffed into a line of text breaks its box

The countdown chip's ones-place digit first sat inline with the surrounding text, just scaled up to a bigger font-size. The digit spilled outside the chip and sat on the background — the chip is inline-flex, so its line height follows the surrounding text, and without overflow: hidden, a taller inline child simply overflows past the pill's edge. Pulling the digit into its own fixed-size box (18×26px) and adding overflow: hidden to the chip itself kept every digit inside. Blow the same glow up to section size and the bloom math matches AI Landing Page Design Kit. The zip password is cwww6ahb, and typing it exactly as shown opens all nine folders. The 3D flip badge has a similar trap — skip backface-visibility: hidden on either face, and the back text shows through mirrored mid-spin.

Accessibility

All nine drop their animation under prefers-reduced-motion: reduce and settle on a final state. The online ring keeps just the dot, the achievement badge stays at its unlocked color, and the countdown digit stops advancing. Every state reads from color and shape alone once motion is off. See MDN's prefers-reduced-motion docs for how to set it.

FAQ

Can I recolor these badge design ideas?

Yes — most demos take one $color variable at the top of the SCSS. The premium/verified flip (08) is the exception, since each face has its own gradient to edit. More badge ideas live in 9 CSS badge designs. Badges that sell rather than report state, new and sale, get their own nine in CSS Badge Design Ideas.

Does the removable tag chip need JavaScript?

CSS alone can't remove an element. The tag chip (02) ships with about ten lines of vanilla JS that actually deletes it on click; the React version moves the same logic into a couple of useState hooks.

Does the countdown chip track real time?

No — it's a looping demo built to show the motion, not wired to a clock. To count down for real, compare the current time to a target with setInterval and swap in the digit. See About for how these demos get built and checked.

Enter the archive password

The password is inside this article. You will find it as you read.