Tools Blog

Badge Generator

Create CSS badges, labels and tags with live preview. Choose style, color, size and shape — copy clean HTML + CSS.

3 badge stylesEmoji supportCSS only

① Type badge text and pick a style ② Choose color, size and shape ③ Copy the CSS and HTML

#C9B89A
New
/* CSS */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: #c9b89a;
  color: #ffffff;
  border: none;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

/* HTML */
<span class="badge">New</span>

What are CSS badges and how to design them?

CSS badges are small inline UI components used to label, categorize or highlight content. They are commonly used for notification counts, status indicators, product tags, version numbers and feature labels. Three core visual styles exist: filled (solid background with white text), outlined (transparent background with colored border and text) and soft (low-opacity background with full-opacity text — great for light UIs). Shape is controlled by border-radius: pill shapes use 9999px for fully rounded corners, rounded uses 6px, and square uses 2px. Adding an emoji prefix is a common pattern in modern design systems to add instant visual meaning without icons. Badges pair well with navigation items, card headers and table cells.

Frequently Asked Questions

A CSS badge is a small inline UI element used to label, tag or highlight content. It typically consists of a <span> element styled with background, border-radius, padding and font-size to create a compact pill or rounded rectangle.
Filled badges have a solid background with white text — high contrast and attention-grabbing. Outlined badges use a transparent background with a colored border and text — minimal, elegant. Soft badges use a low-opacity (≈13%) background tint with full-opacity text — ideal for light-mode UIs.
Pill (border-radius: 9999px) is the most common for tags and notification counts. Rounded (6px) suits status labels in cards. Square (2px) fits data tables, code tags and technical labels.
Add an emoji directly as a text prefix before the badge label. Emoji render consistently across browsers and add instant semantic meaning (🎉 for celebration, ✅ for completed, ⚠️ for warnings) without requiring icon libraries.
Define the generated CSS class once and apply it to as many <span class="badge"> elements as you need. Each badge instance inherits the same styles, ensuring visual consistency.
Yes. Common animations include a pulse (scale + opacity) to draw attention to notification counts, or a slide-in for dynamically added badges. Add animation: pulse 1.5s infinite to the badge class.
Soft badges work well in both modes if you use CSS variables. Filled badges maintain contrast in both modes. Outlined badges may need a border-color adjustment in dark mode since the color may appear too light against dark backgrounds.
Related Articles
Design 9 min read
How to Build a Consistent Brand Color Palette from Scratch
A step-by-step guide to choosing your primary brand color, generating harmonies, checking WCAG contrast, and exporting CSS variables — using free PixCode tools at every step.
Color Theory 8 min read
RAL vs Pantone vs HEX: which color system should you use and when
A complete, honest comparison of RAL, Pantone and HEX color systems. Understand their technical foundations, use cases, and how to choose the right one for your project.

Explore Our Network

ntool.io Free network diagnostics toolkit — ping, traceroute, DNS lookup, port scanner, and more Visit → capops.io Free financial calculators — compound interest, mortgage, retirement planning, investment tools and more Visit →