Design et Ressources

Status Indicator CSS Générateur

Générer live status badge CSS.

Plus dans Design et Ressources

Entrée

Status Indicator CSS Générateur

status badgeindicatorcssui

Sortie

Status Indicator CSS Generator

.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  padding: 8px 17px;
  background: #dcfce7;
  color: #22c55e;
  font-weight: 700;
}

.status-indicator .dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 6px color-mix(in srgb, #22c55e 20%, transparent);
}

Live preview

Live canvas

Outils similaires

Pill Badge CSS Générateur

Générer pill badge CSS style.

Ribbon Card CSS Générateur

Générer ribbon badge card CSS.

Accordion CSS Générateur

Générer accordion panel CSS.

Avatar Stack CSS Générateur

Générer overlapping avatar stack CSS.

Border Radius Générateur

Générer border-radius CSS de corner values.

Floating Label Input CSS Générateur

Générer floating label input CSS.