Badge Generator
Crea insignias, etiquetas y tags CSS con vista previa en vivo. Elige estilo, color, tamaño y forma — copia HTML + CSS.
① Escribe el texto y elige un estilo ② Elige color, tamaño y forma ③ Copia el CSS y el 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>¿Qué son las insignias CSS y cómo diseñarlas?
Las insignias CSS son pequeños componentes de UI en línea usados para etiquetar, categorizar o destacar contenido. Los tres estilos principales son: relleno (fondo sólido con texto blanco), contorno (fondo transparente con borde y texto de color) y suave (fondo de baja opacidad con texto completo). La forma se controla mediante border-radius: pill usa 9999px, redondeado 6px, cuadrado 2px.
Preguntas frecuentes
Una insignia CSS es un pequeño elemento de UI en línea usado para etiquetar o destacar contenido. Consiste en un elemento <span> estilizado con fondo, border-radius, padding y font-size.
Relleno: fondo sólido con texto blanco. Contorno: fondo transparente con borde y texto de color. Suave: fondo de baja opacidad (≈13%) con texto completo — ideal para UI claras.
Píldora (9999px) es el más común para tags y contadores. Redondeado (6px) se adapta a etiquetas de estado en tarjetas. Cuadrado (2px) encaja en tablas y etiquetas técnicas.
Añade un emoji directamente como prefijo de texto antes de la etiqueta. Los emojis añaden significado semántico sin bibliotecas de iconos.
Define la clase CSS generada una vez y aplícala a todos los elementos <span class='badge'> que necesites.
Sí. Las animaciones comunes incluyen un pulse (escala + opacidad) para contadores de notificaciones.
Las insignias suaves funcionan bien en ambos modos con variables CSS. Las rellenas mantienen el contraste. Las de contorno pueden necesitar ajustes de border-color en modo oscuro.