Badge Generator
Maak CSS-badges, labels en tags met live voorbeeld. Kies stijl, kleur, grootte en vorm — kopieer schone HTML + CSS.
① Typ badgetekst en kies een stijl ② Kies kleur, grootte en vorm ③ Kopieer de CSS en HTML
#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>Wat zijn CSS-badges en hoe ontwerp je ze?
CSS-badges zijn kleine inline UI-componenten om inhoud te labelen, categoriseren of markeren. De drie kernstijlen zijn: gevuld (solide achtergrond met witte tekst), omlijnd (transparante achtergrond met gekleurde rand en tekst) en zacht (achtergrond met lage dekking met volledige dekking tekst). De vorm wordt bepaald door border-radius: pil gebruikt 9999px, afgerond 6px, vierkant 2px.
Veelgestelde vragen
Een CSS-badge is een klein inline UI-element om inhoud te labelen of markeren. Het bestaat doorgaans uit een <span>-element gestyled met achtergrond, border-radius, padding en font-size.
Gevuld: solide achtergrond met witte tekst — hoog contrast. Omlijnd: transparante achtergrond met gekleurde rand en tekst — minimaal. Zacht: achtergrond met lage dekking (≈13%) met volledige dekking tekst — ideaal voor lichte UI's.
Pil (9999px) is het meest gebruikelijk voor tags en tellers. Afgerond (6px) past bij statuslabels in kaarten. Vierkant (2px) past bij tabellen en technische labels.
Voeg een emoji direct toe als tekstvoorvoegsel voor het badgelabel. Emoji's bieden semantische betekenis zonder iconenbibliotheken.
Definieer de gegenereerde CSS-klasse eenmaal en pas deze toe op alle <span class='badge'>-elementen die je nodig hebt.
Ja. Veelgebruikte animaties zijn een pulse (schaal + dekking) voor meldingstellers.
Zachte badges werken goed in beide modi met CSS-variabelen. Gevulde badges behouden contrast. Omlijnde badges hebben mogelijk border-color-aanpassingen nodig in donkere modus.