GODRICH

【コピペOK】css バッジ デザイン 9選 — NEW・SALE・認証バッジ

· Godrich · 9種 · 5分で読める

フィードバックSCSSCSSのみ自動再生決済・EC通知

サムネイルや名前の横に小さく貼りついて、いまの状態を一目で伝えるラベルがバッジです。新着・セール・認証済み・完売など、写真を使わずコードだけで作れます。ここに載せたcss バッジ デザインはどれもコピペOKで、画像ファイルは一切要りません。

01 badge-new-ribbon 02 badge-sale-percent 03 badge-verified-check 04 badge-beta-pill 05 badge-live-pulse-dot 06 badge-count-notification 07 badge-trending-flame 08 badge-limited-stock 09 badge-sold-out-overlay

自動再生 · タイルを押すとその項目へ · すべて1つのzip

9つは人気順ではなく、実際のショッピング画面でバッジが登場する順に並べています。最初に目に入る新着(01)と財布を動かすセール(02)から始まり、信頼を伝える認証(03)・まだ調整中だと知らせるベータ(04)へ進みます。続いて今まさに起きていることを示すライブ(05)・たまっていく通知(06)、人気を裏づけるトレンド(07)を経て、在庫が減っていく警告(08)と締切を告げる完売(09)で終わります。

01コーナーリボンバッジ

カード角を横切るリボンをrotate(-45deg)で斜めに配置し、その上に重ねた白い光の帯(::after)をbackground-positionだけでスイープさせています。止まっていても視線を引き続ける新着ラベルになります。

rotate(-45deg)::after 빛줄기 스윕overflow: hidden
.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; }
}

02セールタグバッジ

clip-pathで切り抜いた本物の値札の形(穴つき)のバッジが、わずかに揺れながら拡大縮小を繰り返します。糸で吊り下げられた紙タグのように見えます。

clip-path polygon@keyframes rotate+scalebox-shadow
.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); }
}

03認証チェックバッジ

名前の横の認証バッジをPhosphorのSVGアイコン1つで置き、確定の瞬間にtransform: scaleが1 → 1.28 → 0.94 → 1と跳ねてから収まり、確定した感じを出します。

currentColor@keyframes poparia-label
.check {
  transform-origin: center;
  color: $color;   /* Phosphor duotone 의 fill="currentColor" 가 이 값을 물려받는다 */
}
.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); }
}

04ベータグラデーションピルバッジ

紫色のグラデーションレイヤーをピルの背景色に重ね、opacityだけを0から1、また0へと上下させます。2色が溶け合うようにBETAラベルの上で交差します。

겹친 레이어 opacity 크로스페이드position: absolute; inset: 0border-radius: $r-pill
.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; }
}

05ライブパルスドットバッジ

ドットの背後にある::before円が広がりながらopacityが0まで薄れることを繰り返します。ライブ配信の発信源から信号が広がっていくレーダーのように見えます。

::before scale·opacityaria-label@keyframes ping
.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; }
}

06通知カウントバッジ

小さな丸がscale(0)から1.15を経て1に収まるようにバウンドし、ちょうどそのタイミングでベルアイコン自体も短くrotateで揺れます。通知が届いた瞬間を伝えます。

@keyframes scale bouncetransform-origin@media (prefers-reduced-motion)
.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); }
}

07トレンディングフレイムバッジ

炎形のSVGにfilter: brightnessとhue-rotateをフレームごとに微妙にずらしてかけています。本物の炎のように規則的な点滅にはなりません。

filter: hue-rotate·brightness다중 box-shadow 플리커@keyframes
.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); }
}

08在庫バーバッジ

バッジ内の細いバーがtransform-origin: leftを基準にscaleXを1から0.25まで縮め、同時に背景色が緑→オレンジ→赤へと変わります。長さと色の両方で在庫の減少を見せます。

scaleX draintransform-origin: left배경색 다단 보간
.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; }
}

09完売ストライプオーバーレイ

カード全体を覆うrepeating-linear-gradientの斜め縞模様が、background-positionの移動でカード全体を流れ続けます。中央のSOLD OUTスタンプは呼吸するようにscaleが上下します。

repeating-linear-gradientbackground-position 애니메이션rgba 오버레이
.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; }
}

どこで落とし穴にはまるか — リペイント頼みの動きは録画で消える

04番のベータバッジのグラデーションは、最初background-positionを動かして流していました。目で見れば確かに流れているのに、同じ画面をフレーム単位で比べるとフレーム間の差がほとんど出ません — background-positionのリペイントのタイミングはブラウザ任せで、キャプチャの瞬間とずれると変化が閾値の下に沈んでしまうからです。紫のレイヤーを1枚重ね、そのopacityだけを0から1へ上下させる方式に変えると、同じ見た目がフレームごとにはっきり残りました。背景位置や影のにじみのようにリペイントが要る属性ではなく、opacityやtransformのようにコンポジット段階で回る属性を選べば、目に見えるものと録画に残るものがずれません。zipを解凍するときに聞かれるパスワードはwpxqsgtkで、表示されているとおりに入力すれば9つのフォルダがそのまま開きます。03番の認証チェックも同じ理由で、線を描き込む方式ではなくアイコン全体をtransform: scaleで弾ませています。

アクセシビリティ

9つすべてがprefers-reduced-motion: reduceのもとでanimation: noneになります。07番の炎の点滅や09番の縞模様オーバーレイのように動き続けるものも、静止した状態で色と形だけで意味が伝わるように止め値を決めてあります。03番のチェックはモーションをオフにすると元の大きさ(scale(1))のまま表示され、認証マーク自体が消えることはありません。この設定の仕組みはMDNのprefers-reduced-motionのページに詳しく載っています。

FAQ

画像ファイルなしでバッジデザインは作れますか？

はい、9つすべて画像ファイルなしで、03・06・07番だけ短いインラインSVGアイコンを添えています。背景・影・clip-pathの形だけでリボンや値札の切り欠き、斜め縞模様まで表現できます。ほかのCSSだけの装飾はサイト内検索で「バッジ」と調べると見つかります。

バッジの色を自分のブランドカラーに変えられますか？

変えられます。ほとんどのデモはSCSSの先頭にある$color変数ひとつを書き換えるだけで全体の色が変わり、React版も同じことをcolorpropひとつで行います。08番のように状態ごとに色が何段階も変わる項目は@keyframes内の各段階の色もあわせて書き換える必要があります(03番の認証マークはfill="currentColor"なのでcolorの値をそのまま受け継ぎます)。

バッジのアニメーションが画面収録で薄くしか映らないのですが？

動かす属性を変えてください。背景位置や影のにじみはリペイントが要るためブラウザ任せのタイミングで描かれ、キャプチャとずれやすい一方、opacityとtransformはコンポジット段階で回るのでフレームごとにそのまま残ります。このサイトを初めて見た方は、紹介ページでデモをどう作って検証しているかを確認できます。

解凍パスワードを入力してください

パスワードはこの記事の本文の中にあります。読み進めると出てきます。