CSS Badge Generator
Generate CSS badge and pill notification styles with count, color variants, sizes, and positioning.
- Home
- Web Dev
- CSS Badge Generator
What is a CSS Badge?
A CSS badge is a small visual element used to display counts, notifications, or status indicators on UI components like icons, buttons, and avatars. Badges can be pill-shaped (rounded rectangle) or circular, and are commonly placed at the top-right corner of a parent element.
CSS badges are created using simple styling properties like border-radius, background, and position: absolute for placement. They can also include animations like pulse or bounce to draw attention to new notifications.
How to Use
- Set the content — Enter the badge text (number, icon, or short label).
- Choose shape and size — Pick Pill for counts or Circle for dot indicators.
- Customize colors — Adjust the badge background and text color.
- Set position — Choose Absolute to position on a parent element, or Inline for standalone use.
- Add animation — Select Pulse or Bounce to make the badge animated.
- Copy the CSS — Click Copy and paste into your stylesheet.
Frequently Asked Questions
How do I use the badge in my HTML?
Wrap your icon or button in a position: relative container, then add <span class="badge">1</span> inside it.
Can I use text instead of numbers?
Yes. Badges can display any short text like "New", "Sale", or icons. The pill shape adjusts automatically to fit the content.
How do I remove the animation?
Set the Animation dropdown to "None" to generate the badge without any animation keyframes.
Can I use multiple badges on the same page?
Yes. The .badge class can be used on any number of elements. For different colors, use additional modifier classes or inline styles.