Badge Generator
Créez des badges, étiquettes et tags CSS avec aperçu en direct. Choisissez style, couleur, taille et forme — copiez HTML + CSS.
① Saisissez le texte et choisissez un style ② Choisissez couleur, taille et forme ③ Copiez CSS et 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>Que sont les badges CSS et comment les concevoir?
Les badges CSS sont de petits composants UI en ligne utilisés pour étiqueter ou mettre en évidence du contenu. Les trois styles principaux sont: rempli (fond solide avec texte blanc), contour (fond transparent avec bordure et texte colorés) et doux (fond à faible opacité avec texte plein). La forme est contrôlée par border-radius: pill utilise 9999px, arrondi 6px, carré 2px.
Questions fréquentes
Un badge CSS est un petit élément UI en ligne utilisé pour étiqueter ou mettre en évidence du contenu. Il s'agit généralement d'un élément <span> stylisé avec arrière-plan, border-radius, padding et font-size.
Rempli: fond solide avec texte blanc. Contour: fond transparent avec bordure et texte colorés. Doux: fond à faible opacité (≈13%) avec texte plein — idéal pour les interfaces light.
Pilule (9999px) est le plus courant pour les tags et compteurs. Arrondi (6px) convient aux labels de statut dans les cartes. Carré (2px) s'adapte aux tableaux et tags techniques.
Ajoutez un emoji directement comme préfixe texte avant l'étiquette du badge. Les emojis ajoutent du sens sémantique sans bibliothèques d'icônes.
Définissez la classe CSS générée une fois et appliquez-la à tous les éléments <span class='badge'> nécessaires.
Oui. Les animations courantes incluent un pulse (échelle + opacité) pour attirer l'attention sur les compteurs de notifications.
Les badges doux fonctionnent bien dans les deux modes avec des variables CSS. Les badges remplis maintiennent le contraste. Les badges contour peuvent nécessiter des ajustements de border-color en dark mode.