CSS Badge Generator
Pill, rounded, or square badges with copyable CSS.
Written by Golam Rabbani, Founder & Lead Engineer
How to use this css badge generator
- Type the badge text — short tokens like "NEW", "BETA", "PRO", or numbers like "12".
- Pick a shape: Pill (radius 9999px), Rounded (radius 6px), or Square (radius 0).
- Set background and text color with the color pickers.
- Adjust padding (Y and X), font size, and font weight; tick UPPERCASE to apply CSS `text-transform: uppercase` with letter spacing.
- Press Generate CSS, then Copy CSS to grab a complete `.badge` rule.
About this css badge generator
The CSS badge generator emits a single, ready-to-paste `.badge` rule that captures every property you typically need: `display: inline-block`, `background`, `color`, `padding`, `border-radius`, `font-size`, `font-weight`, optional `text-transform: uppercase` with `letter-spacing`, an optional border, and a tight `line-height: 1.2`. The preview lives above the controls so it paints first as the LCP element and uses the same live values, which means the preview never drifts from the output.
Worked example: text "NEW", shape Pill, background #10b981, color #ffffff, padding Y=2, X=8, font size=12, weight=600, uppercase ticked, border width=0. The tool emits: ``` .badge { display: inline-block; background: #10b981; color: #ffffff; padding: 2px 8px; border-radius: 9999px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border: 0px solid #047857; line-height: 1.2; } ``` That is the classic small green status pill — paste it into your stylesheet and apply `class="badge"` to any inline element.
FAQ
- Why is the radius value `9999px` for a pill?
- CSS clamps border-radius so two adjacent corners cannot overlap. Setting an extremely large value reliably produces a pill regardless of the badge’s height — much safer than computing `(height / 2)` for every size.
- How do I size a badge for a number indicator (e.g. "12")?
- Use square padding (set Y and X to the same value, around 4–6 px) and a fixed font size of 12. For a circular dot use Pill shape, set width and height in your own CSS, and let the radius do the rest.
- When should I use uppercase + letter spacing?
- For short status tokens like "NEW" or "BETA" — uppercase improves recognition at small sizes. For numerals or longer labels, leave it off; uppercase numerals are just numerals and the letter-spacing hurts readability of words longer than ~6 characters.
- How do I make the badge sit nicely next to text?
- `display: inline-block` (already in the output) plus `vertical-align: middle` or a slight margin-bottom adjustment usually aligns it with the surrounding text baseline.
- Can I add a hover state to a badge?
- Yes — paste the `.badge` rule, then add `.badge:hover { background: <darker-color>; }`. Most badges are passive labels, but a hoverable badge is useful for filter chips.