Badge Generator

Create badge components with size, color, and shape variants

Colors

Background

Text

Style

Size

Shape

Variant

Custom Sizing

Padding X12px

Padding Y6px

Font Size14px

Font Weight500

Options

Show Dot

Show Number Badge

Presets

Live Preview

Badge

Generated CSS

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #3b82f6;
  
  color: #ffffff;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
}