التصميم والموارد

مولد CSS لشارات على شكل حبوب (Pill)

إنشاء CSS لأنماط شارات على شكل حبوب.

التصنيف

التصميم والموارد

الوسوم

badgeكبسولةCSSui

المزيد من التصميم والموارد

الإدخال

مولد CSS لشارات على شكل حبوب (Pill)

badgeكبسولةCSSui

الإخراج

مولد كبسولة Badge CSS

.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  padding: 4px 12px;
  background: #dcfce7;
  color: #16a34a;
  font-size: 13px;
  font-weight: 700;
}

مباشر معاينة

Live canvas