Badges CSS
Crea insignias y píldoras (badges) con CSS: colores, texto y forma a tu gusto. Gratis y sin registro.
Resultado
¿Cómo usar esta herramienta?
Crea insignias y píldoras (badges) con CSS.
Escribe tus datos, pulsa Generar CSS y obtén el resultado al instante. Puedes copiarlo con el botón «Copiar resultado». Todo se calcula en tu navegador: tus datos no salen de tu dispositivo.
Preguntas frecuentes
¿Cómo creo una insignia CSS?
Elige los colores, el texto y la forma (píldora o rectangular); pulsa Generar CSS para obtener tu insignia lista.
¿Qué formas incluye?
Píldoras redondeadas o rectángulos con bordes suaves: elige la forma que encaje con tu diseño.
¿El código es compatible?
Sí, el código generado es CSS estándar compatible con los navegadores modernos.
¿Puedo usarla desde el celular?
Sí, está optimizada para pantallas pequeñas y funciona directo en el navegador.
Herramientas relacionadas de Color y diseño
Tooltips CSS
Tooltips con CSS puro, sin JavaScript: colores, posición y texto a tu gusto.
Usar gratisAcordeón CSS
Acordeón desplegable con CSS puro, sin JavaScript: define tus secciones y copia el HTML+CSS.
Usar gratisHEX a RGB
Convierte cualquier color hexadecimal a sus valores RGB al instante.
Usar gratisRGB a HEX
Convierte valores RGB (0–255) a código hexadecimal listo para tu CSS.
Usar gratisGenerador de paletas
Elige un color base y genera paletas armónicas: análoga, complementaria, triádica y más.
Usar gratisContraste WCAG
Comprueba si tu combinación de colores cumple WCAG 2.
Usar gratis