Badge Generator
Create badges in solid, soft and outline variants with an optional status dot. Control radius, padding and font size.
.badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px; font-weight: 600;
background: rgba(109, 94, 252, 0.15); color: #6d5efc;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }About the badge generator
Badges label status: new, active, beta, out of stock. The soft variant, a tinted background with matching text, is the modern default because it carries the colour signal without shouting like a solid fill.
The optional status dot inherits the text colour, so it stays in sync whatever the variant.
How to use it
- 1Type the label and choose a variant.
- 2Pick the colour. It drives background, text and dot together.
- 3Set radius. Fully rounded reads as a pill, small radius as a tag.
- 4Copy the CSS.
Questions
Badge or chip?
A badge is read-only and describes status. A chip usually represents a selection the user made and can be removed. Use the chip generator when it needs a close button.
Which variant should I default to?
Soft. It carries the colour meaning without competing with the content around it. Save solid for things that genuinely need attention.
How small can badge text go?
Eleven or twelve pixels is the practical floor. Below that it fails contrast for many users even when the colour ratio technically passes.