CSS Basic Badge

Last Updated:

CSS basic badge is a small images or icons that can be used to visually represent a feature or accomplishment on a website. CSS badges are often used to indicate awards, certifications, and other achievements.

Basic badge HTML CSS

BadgeBadgeBadgeBadgeBadgeBadgeBadgeBadge
BadgeBadgeBadgeBadgeBadgeBadgeBadgeBadge
<!-- Basic Badges -->
<span class="basic-badge">Badge</span>
<span class="basic-badge red">Badge</span>
<span class="basic-badge yellow">Badge</span>
<span class="basic-badge green">Badge</span>
<span class="basic-badge blue">Badge</span>
<span class="basic-badge indigo">Badge</span>
<span class="basic-badge purple">Badge</span>
<span class="basic-badge pink">Badge</span>

<!-- Large Badges -->
<span class="large-badge">Badge</span>
<span class="large-badge red">Badge</span>
<span class="large-badge yellow">Badge</span>
<span class="large-badge green">Badge</span>
<span class="large-badge blue">Badge</span>
<span class="large-badge indigo">Badge</span>
<span class="large-badge purple">Badge</span>
<span class="large-badge pink">Badge</span>

.basic-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  color: #1f2937;
  background-color: #f3f4f6;
}
.large-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  padding: 0.125rem 0.75rem;
  border-radius: 9999px;
  color: #1f2937;
  background-color: #f3f4f6;
}
.red {
  color: #991b1b;
  background-color: #fee2e2;
}
.yellow {
  color: #854d0e;
  background-color: #fef9c3;
}
.green {
  color: #166534;
  background-color: #dcfce7;
}
.blue {
  color: #1e40af;
  background-color: #dbeafe;
}
.indigo {
  color: #3730a3;
  background-color: #e0e7ff;
}
.purple {
  color: #6b21a8;
  background-color: #f3e8ff;
}
.pink {
  color: #9d174d;
  background-color: #fce7f3;
}