パーツ番号 09-04-04 ・ CSSのみ

グラデーションバッジ

グラデーション背景を持つバッジを色違いで並べた静止見本です。キャンペーンページやプレミアム会員などの特別感を出すラベルに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-04-04-wrap">
          <span class="d09-04-04-badge d09-04-04-sunset">Special</span>
          <span class="d09-04-04-badge d09-04-04-ocean">Premium</span>
          <span class="d09-04-04-badge d09-04-04-berry">Limited</span>
        </div>

CSS

.d09-04-04-wrap{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
        .d09-04-04-badge{display:inline-block;font-size:13px;font-weight:700;padding:6px 16px;border-radius:6px;color:#fff}
        .d09-04-04-sunset{background:linear-gradient(90deg,#f97316,#ef4444)}
        .d09-04-04-ocean{background:linear-gradient(90deg,#0ea5e9,#2563eb)}
        .d09-04-04-berry{background:linear-gradient(90deg,#a855f7,#ec4899)}

クラス名 .d09-04-04 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。