A badge is a small inline label used for status, counts or categories — for example “New”, “Beta” or a notification number.

Are badges accessible?

Keep the text readable and don't rely only on color: the label itself should say what the status is.

Can I copy the generated CSS?

Yes. Click Copy CSS to put the code on your clipboard, or Download CSS to save a .css file. You can also edit the code by hand before copying.

Is anything uploaded to a server?

No. The CSS is generated in your browser from the settings you choose. The tool keeps working offline once the page has loaded.

Can I share my design?

Yes. The page address updates as you change settings, so the Share button copies a link that restores your exact configuration.

CSS Badge Generator

Make tags, status chips and counters that match your UI. Set the colors, padding and shape, add a status dot, and copy the tiny CSS snippet.

Last updated: 2026-07-21 · Runs 100% in your browser

// controls

Presets

Label

Background

Text color

Radius20px

Padding Y4px

Padding X10px

Font size12px

Uppercase

Status dot

Live preview

Generated CSS

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #0f2a1a;
  color: #00ff66;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

// Example output

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #0f2a1a;
  color: #00ff66;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

// Features

▸Pill or square shapes
▸Optional status dot
▸Uppercase and letter-spacing
▸Custom label text
▸Tiny, dependency-free CSS

// How to use

01Adjust the controls on the left or pick a preset to start the CSS Badge Generator.
02Watch the live preview update instantly as you change each setting.
03Fine-tune the generated CSS by hand in the code panel if you like.
04Click Copy CSS or Download CSS, or Share to send a link to your design.