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

9 CSS Badge Design Ideas — New, Sale, Verified

· Godrich · 9 items · 11 min read

FeedbackSCSSCSS onlyAutoplayCheckoutNotifications

A badge is the small label on a thumbnail or name that shows status at a glance — new, sale, verified, sold out.

Corner ribbon badge01 badge-new-ribbon Sale tag badge02 badge-sale-percent Verified check badge03 badge-verified-check Beta gradient pill badge04 badge-beta-pill Live pulse dot badge05 badge-live-pulse-dot Notification count badge06 badge-count-notification Trending flame badge07 badge-trending-flame Limited-stock bar badge08 badge-limited-stock Sold-out stripe overlay09 badge-sold-out-overlay

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

The order below follows how a shopper actually meets these badges, not a list of badge design ideas ranked by popularity. It opens with the first thing that catches an eye — new (01) and a price-shaking sale (02) — then moves to trust signals: verified (03) and an honest beta (04). From there it covers what's happening right now — live (05) and piling-up notifications (06) — before closing with proof of popularity (07) and the two warnings that end a purchase, low stock (08) and sold out (09). Bend the same small label toward refracting light and it becomes 9 CSS Holographic Card Effects; sink it toward form right-and-wrong and it becomes 9 Form Validation CSS Animations.

01Corner ribbon badge

What you see

A ribbon tilted with rotate(-45deg) sits across the card corner, and a white light streak layered on top of it (an ::after gradient) sweeps across it on a loop by animating only background-position.

Corner ribbon badge
Open in a new tab

01 · Corner ribbon badge — Measured area 1.912% · moving frames 9/23Original by GODRICH · SCSS and React ship in the zip · See the password

rotate(-45deg)::after 빛줄기 스윕overflow: hidden

Where to look in the code

Even a static NEW label keeps pulling the eye this way.

.ribbon-wrap {
  position: absolute;
  top: $sp-6; left: -$sp-10;
  transform: rotate(-45deg);
}
.ribbon::after {
  background: linear-gradient(115deg, transparent 15%, rgba(255, 255, 255, .7) 45%, transparent 75%);
  background-size: 220% 100%;
}
.stage.is-demo .ribbon::after {
  animation: shine-sweep $duration $easing infinite;
}
@keyframes shine-sweep {
  0%, 15% { background-position: 140% 0; }
  55%, 100% { background-position: -40% 0; }
}

02Sale tag badge

What happens on screen

clip-path cuts the badge into an actual price-tag silhouette, notch included, and it rocks and scales in a loop so it reads like a real paper tag swinging on a string.

Sale tag badge
Open in a new tab

02 · Sale tag badge — Measured area 3.387% · moving frames 22/23Original by GODRICH · SCSS and React ship in the zip · See the password

clip-path polygon@keyframes rotate+scalebox-shadow

How to read the code

.tag {
  clip-path: polygon(0 0, 76% 0, 100% 50%, 76% 100%, 0 100%);
  transform-origin: 8% 50%;
}
.stage.is-demo .tag {
  animation: tag-swing $duration $easing infinite;
}
@keyframes tag-swing {
  0%, 100% { transform: rotate(0deg) scale(1); }
  30% { transform: rotate(-6deg) scale(1.05); }
  60% { transform: rotate(3deg) scale(1.02); }
  80% { transform: rotate(-1deg) scale(1); }
}

03Verified check badge

What moves

The verified badge beside the name is a single Phosphor SVG icon, and the moment it is confirmed transform: scale pops it 1 → 1.28 → 0.94 → 1 and settles.

Verified check badge
Open in a new tab

03 · Verified check badge — Measured area 0.231% · moving frames 6/23Original by GODRICH · SCSS and React ship in the zip · See the password

currentColor@keyframes poparia-label

What to change

.check {
  transform-origin: center;
  color: $color;   /* the Phosphor duotone fill="currentColor" inherits this value */
}
.stage.is-demo .check {
  animation: pop $duration $easing infinite;
}
@keyframes pop {
  0%, 50% { transform: scale(1); }
  62% { transform: scale(1.28); }
  74% { transform: scale(0.94); }
  86%, 100% { transform: scale(1); }
}

04Beta gradient pill badge

What you see

A purple gradient layer sits on top of the pill's base color, and only its opacity rises from 0 to 1 and back, so the two colors seem to bleed into each other across the BETA label.

Beta gradient pill badge
Open in a new tab

04 · Beta gradient pill badge — Measured area 2.951% · moving frames 16/23Original by GODRICH · SCSS and React ship in the zip · See the password

겹친 레이어 opacity 크로스페이드position: absolute; inset: 0border-radius: $r-pill

Where to look in the code

.pill { position: relative; overflow: hidden; }
.pill__glow {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, $stage-yellow, #a855f7);
  opacity: 0;
}
.stage.is-demo .pill__glow {
  animation: glow-cross $duration $easing infinite;
}
@keyframes glow-cross {
  0%, 10% { opacity: 0; }
  50% { opacity: 1; }
  90%, 100% { opacity: 0; }
}

05Live pulse dot badge

What happens on screen

A ::before circle behind the dot scales outward while its opacity fades to 0 on a loop, reading like a radar ping broadcasting outward from a live source.

Live pulse dot badge
Open in a new tab

05 · Live pulse dot badge — Measured area 0.147% · moving frames 8/23Original by GODRICH · SCSS and React ship in the zip · See the password

::before scale·opacityaria-label@keyframes ping

How to read the code

.dot { position: relative; }
.dot::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: $color;
}
.stage.is-demo .dot::before {
  animation: ping $duration $easing infinite;
}
@keyframes ping {
  0% { transform: scale(1); opacity: .7; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}

06Notification count badge

What moves in this notification badge css

The small circle springs from scale(0) past 1.15 and settles at 1, and right at that moment the bell icon itself rocks with a short rotate, signaling a notification just landed.

Notification count badge
Open in a new tab

06 · Notification count badge — Measured area 0.864% · moving frames 7/23Original by GODRICH · SCSS and React ship in the zip · See the password

@keyframes scale bouncetransform-origin@media (prefers-reduced-motion)

What to change

.count {
  transform: scale(0);
}
.stage.is-demo .bell {
  animation: shake $duration $easing infinite;
}
.stage.is-demo .count {
  animation: pop-in $duration $easing infinite;
}
@keyframes pop-in {
  0%, 52% { transform: scale(0); }
  62% { transform: scale(1.15); }
  74%, 100% { transform: scale(1); }
}

07Trending flame badge

What you see

The flame SVG gets filter: brightness and hue-rotate nudged unevenly frame to frame, so the flicker never settles into a predictable beat, the way real fire doesn't either.

Trending flame badge
Open in a new tab

07 · Trending flame badge — Measured area 3.995% · moving frames 22/23Original by GODRICH · SCSS and React ship in the zip · See the password

filter: hue-rotate·brightness다중 box-shadow 플리커@keyframes

Where to look in the code

.stage.is-demo .flame {
  animation: flicker $duration $easing infinite alternate;
}
@keyframes flicker {
  0% { filter: brightness(1) hue-rotate(0deg); transform: scale(1); }
  18% { filter: brightness(1.25) hue-rotate(-6deg); transform: scale(1.05); }
  40% { filter: brightness(.92) hue-rotate(4deg); transform: scale(.97); }
  63% { filter: brightness(1.15) hue-rotate(-3deg); transform: scale(1.03); }
  81% { filter: brightness(.97) hue-rotate(2deg); transform: scale(1); }
  100% { filter: brightness(1.2) hue-rotate(-5deg); transform: scale(1.04); }
}

08Limited-stock bar badge

What happens on screen

A thin bar inside the badge shrinks scaleX from 1 toward 0.25 around transform-origin: left, while its background-color shifts from green to orange to red, so length and color drain together.

Limited-stock bar badge
Open in a new tab

08 · Limited-stock bar badge — Measured area 0.817% · moving frames 20/23Original by GODRICH · SCSS and React ship in the zip · See the password

scaleX draintransform-origin: left배경색 다단 보간

How to read the code

.fill {
  transform: scaleX(1);
  transform-origin: left;
}
.stage.is-demo .fill {
  animation: drain $duration $easing infinite;
}
@keyframes drain {
  0%, 10% { transform: scaleX(1); background: $color; }
  50% { transform: scaleX(.6); background: $stage-orange; }
  90%, 100% { transform: scaleX(.25); background: $error; }
}

09Sold-out stripe overlay

What moves

A repeating-linear-gradient of diagonal stripes keeps scrolling across the whole card by animating background-position, while the SOLD OUT stamp in the middle breathes with a slow scale pulse.

Sold-out stripe overlay
Open in a new tab

09 · Sold-out stripe overlay — Measured area 21.144% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

repeating-linear-gradientbackground-position 애니메이션rgba 오버레이

What to change

.overlay {
  background: repeating-linear-gradient(-45deg,
    rgba($color, .82) 0 $sp-4,
    rgba($color, .62) $sp-4 #{$sp-4 * 2});
  background-size: #{$sp-4 * 4} #{$sp-4 * 4};
}
.stage.is-demo .overlay {
  animation: stripes-flow $duration $easing infinite;
}
@keyframes stripes-flow {
  0% { background-position: 0 0; }
  100% { background-position: #{$sp-4 * 4} 0; }
}

Where this breaks — motion that leans on repaint vanishes on camera

Badge 04's gradient sheen originally moved by sliding background-position. To the eye it clearly flowed, but comparing the same stage frame by frame showed almost no difference between consecutive frames — background-position leaves its repaint timing entirely to the browser, and when that falls out of step with the capture, the change sinks below the threshold. Layering a purple sheet on top and animating only its opacity from 0 to 1 kept the same effect sharp in every frame. Pick properties that run on the compositor, like opacity and transform, over ones that need a repaint, like background position or a spreading shadow, and what you see stops disagreeing with what the recording keeps. Filling the screen with pencil marks instead of color is the corner where Crayon Web Design lives. The password for the zip is wpxqsgtk, typed exactly as shown, and it opens all nine folders at once. Badge 03's verified check went the same way — instead of drawing a stroke in, the whole icon pops with transform: scale.

Accessibility

All nine drop to animation: none under prefers-reduced-motion: reduce. Badges that loop forever, like 07's flame flicker and 09's stripe overlay, still read correctly at rest — color and shape carry the meaning on their own. Badge 03's checkmark simply stays at its natural scale(1) when motion is off, so the verified mark itself never disappears. The full spec for this setting lives in MDN's prefers-reduced-motion page.

FAQ

Can I build this notification badge html css without any image files?

Yes — all nine use only CSS, plus a short inline SVG icon for badges 03, 06, and 07. Backgrounds, shadows, and clip-path shapes are enough to draw ribbons, tag notches, and diagonal stripes. More CSS-only decorations turn up under site search if you look for "badge". The work-a-day angle — status and priority labels rather than shopper hooks — is collected in Status Badge Design UI.

Can I swap these colors for my own brand?

Yes, for most of them. Every demo keeps a single $color variable at the top of its SCSS (03's check icon is fill="currentColor", so it inherits that same color), and the React version exposes the same thing as a color prop — change that one value and the whole badge follows. Badge 08, which shifts color across several stages, needs each stage inside its @keyframes updated too.

My badge animation looks washed out in a screen recording. Why?

Change which property moves. Background position and spreading shadows need a repaint, so the browser decides when they land and that can fall out of step with the capture, while opacity and transform run on the compositor and survive frame by frame. First time on this site? The about page explains how these demos get built and checked before anything ships.

Enter the archive password

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