AES Encryption Explained: How It Works and Why It Matters
Jun 23, 2026
CSS Badge Generator
Generate CSS badge and pill notification styles with count, color variants, sizes, and positioning.
- Home
- Web Dev
- CSS Badge Generator
CSS Badge
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.
Blog
Latest from Our Blog
CSS Gradient Generator: Create Stunning Gradients for Your Website
Jun 23, 2026
Diff Checker: How to Compare Text and Files Effectively
Jun 23, 2026
JSON Validation: How to Validate and Fix JSON Data
Jun 23, 2026
Regex Testing: How to Test and Debug Regular Expressions
Jun 23, 2026
SSL Certificate Checker: How to Verify SSL/TLS Certificates Online
Jun 23, 2026