Open menu

CSS Badge & Tag Generator

Create a consistent set of badges for statuses, categories and counts. Pick from nine styles, including solid, soft, outline, status dot, gradient, icon, removable chip, count and pill, and get six semantic tones (brand, neutral, success, warning, danger and info) at once. Soft and outline text colors are darkened automatically until they pass WCAG AA contrast. Export HTML for every tone, plus CSS with tone modifiers, SCSS, Tailwind or React.

Preset gallery
NewNeutralSuccessWarningDangerInfo

Accessibility checks

  • Pass Every tone has at least 4.5:1 text contrast. Soft and outline text colors are darkened automatically until they pass.
  • Pass Badges carry a text label, so meaning never depends on color alone.

Export code

<span class="badge badge--brand">New</span>
<span class="badge badge--neutral">Neutral</span>
<span class="badge badge--success">Success</span>
<span class="badge badge--warning">Warning</span>
<span class="badge badge--danger">Danger</span>
<span class="badge badge--info">Info</span>
Favourites on this device (0)

No favourites yet.

Style & text
Size
Tone colors

How to use the badge generator

  1. Choose a style: solid, soft, outline, status dot, gradient, with icon, removable chip, count or pill.
  2. Pick the tone you’re editing and type its text. The preview shows all six tones together.
  3. Set the size, corner radius, weight and whether text is uppercase.
  4. Adjust tone colors to match your brand. The contrast check covers every tone.
  5. Export HTML (all tones), CSS, SCSS, Tailwind or React.

How it’s built

The base .badge class defines the shape. Each tone modifier only sets three custom properties:

.badge--success { --badge-bg: #DCF0E3; --badge-fg: #0F5A2B; --badge-border: #DCF0E3; }

That keeps the CSS small and makes it easy to add new tones: copy a modifier and change three values.

Worked examples

Example 1: order statuses

Load Soft and use tones for statuses: success for “Delivered”, warning for “Pending”, danger for “Cancelled” and neutral for “Draft”. The text labels carry the meaning; the colors help people scan.

Example 2: online presence

Load Dot for user presence: a small dot in the tone color before “Online”, “Away” or “Busy”. It’s compact enough for lists and tables.

Example 3: filter chips

Load Chip brand for active filters above search results. Each chip has a labelled remove button, so keyboard and screen-reader users can clear filters one by one.

Tips

  • Use a limited set of tones, and use them consistently across the product.
  • Uppercase badges need slightly increased letter spacing (the export adds 0.04em).
  • Keep badge text to one or two words.
  • Gradient badges look premium but use white text, so check that both ends of the gradient pass.

Common mistakes

  • Too many tones. If every badge is a different color, none of them stands out. Reserve red and amber for things that need attention.
  • Badges that look like buttons. Badges are labels. If something is clickable, style it as a button or link and give it a focus state.
  • Pale text on pale backgrounds. Soft badges often fail contrast when the text is just the tone color. The generator darkens it until it passes; keep that if you edit the CSS by hand.
  • Long text. Badges are for one or two words. Longer messages belong in an alert or a note.

Frequently asked questions

How are badge text colors kept readable?

For soft and outline badges, the text starts as the tone color and is darkened step by step until it reaches 4.5:1 contrast with the badge background. Solid badges use white or near-black, whichever reads better on the tone.

Can a badge's color alone show its meaning?

No. People who can't distinguish colors would miss it. Every badge carries a text label ("Approved", "Pending"); the color reinforces the meaning but doesn't replace it.

How do removable chips work for keyboard users?

The × is a real button with an accessible name such as "Remove Design" and a 24 × 24px minimum size. It gets a visible focus ring, and your script removes the chip when it's pressed.

How should notification counts be announced?

A bare "3" means little to a screen-reader user. The count badge includes visually hidden context ("unread messages") so it's announced as "3 unread messages".

Should a badge be a button or plain text?

Plain text in most cases. Use a span for status labels, and only use a button when the badge does something on click, such as removing a filter chip.

Sources