Badge Generator
CSS-Badges, Etiketten und Tags mit Live-Vorschau erstellen. Stil, Farbe, Größe und Form wählen — sauberes HTML + CSS kopieren.
① Badge-Text eingeben und Stil wählen ② Farbe, Größe und Form wählen ③ CSS und HTML kopieren
#C9B89A
New
/* CSS */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
padding: 4px 10px;
border-radius: 9999px;
background: #c9b89a;
color: #ffffff;
border: none;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
/* HTML */
<span class="badge">New</span>Was sind CSS-Badges und wie werden sie gestaltet?
CSS-Badges sind kleine Inline-UI-Komponenten zum Beschriften, Kategorisieren oder Hervorheben von Inhalten. Die drei Kernstile sind: gefüllt (solider Hintergrund mit weißem Text), umrissen (transparenter Hintergrund mit farbigem Rand und Text) und soft (Hintergrund mit geringer Deckkraft). Die Form wird über border-radius gesteuert: Pill verwendet 9999px, Rounded 6px, Square 2px.
Häufig gestellte Fragen
Ein CSS-Badge ist ein kleines Inline-UI-Element zum Beschriften oder Hervorheben von Inhalten. Es besteht typischerweise aus einem <span>-Element mit Hintergrund, border-radius, padding und font-size.
Gefüllt: solider Hintergrund mit weißem Text. Umrissen: transparenter Hintergrund mit farbigem Rand und Text. Soft: Hintergrund mit geringer Deckkraft (≈13%) — ideal für Light-UIs.
Pill (9999px) ist am häufigsten für Tags und Zähler. Rounded (6px) eignet sich für Status-Labels in Cards. Square (2px) passt zu Tabellen und technischen Labels.
Füge ein Emoji direkt als Text-Präfix vor dem Badge-Label ein. Emoji bieten semantische Bedeutung ohne Icon-Bibliotheken.
Definiere die generierte CSS-Klasse einmal und wende sie auf alle <span class='badge'>-Elemente an, die du benötigst.
Ja. Häufige Animationen umfassen ein Pulse (Skalierung + Deckkraft) für Benachrichtigungszähler.
Soft-Badges funktionieren in beiden Modi mit CSS-Variablen. Gefüllte Badges behalten Kontrast. Umrissene Badges benötigen möglicherweise border-color-Anpassungen.