Badge Generator
Create CSS badge and pill components online with our free badge generator. Choose from 12 presets or customise every detail - text, size (XS to XL), variant (filled, outlined, subtle, ghost), shape (rounded, pill, square), and colours. Add status dot indicators, close buttons, and interactive hover effects. Preview in real-time and copy the HTML + CSS with one click - no signup required.
<span class="custom-badge">Badge</span>
.custom-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 500;
line-height: 1.4;
padding: 3px 10px;
border-radius: 9999px;
background: #6366F1;
color: #FFFFFF;
border: none;
white-space: nowrap;
user-select: none;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}Why Use Our Badge Generator?
Instant Badge Generation
Create CSS badges and pill components instantly with our badge generator. Adjust text, size, colour, variant, and shape in real-time - the preview updates immediately as you tweak any setting. No server round-trips, no waiting.
Private - No Server Upload Required
The badge generator runs entirely in your browser. All badge configurations, colour choices, and generated code stay on your device - nothing is uploaded to any server.
12 Colour Presets & Custom Colours
Choose from 12 built-in presets covering common badge types: Primary, Success, Warning, Error, Info, Neutral, Subtle, Outlined, Interactive, and size presets. Each preset applies a complete configuration - colours, variant, size, and options - or customise every detail manually.
Copy HTML + CSS with One Click
Copy the generated HTML snippet, CSS styles, or both together with one click. The badge generator produces production-ready code with clean class names, proper inline-flex layout, and comprehensive hover/interactive states.
Common Use Cases for Badge Generator
Status Badges for UI Components
React and Vue developers use the badge generator to create status indicators for data tables, dashboard cards, and list items. The generated badges work directly with component frameworks - paste the CSS into your stylesheet and use the HTML as a component template for order status, user roles, and system alerts.
E-Commerce Product Labels
Online stores use the badge generator to create product labels like "Sale", "New", "Best Seller", and "Limited Edition". Use the interactive pill preset with brand colours to make product badges that catch attention without overpowering the product image. The outlined variant works well for subtle labelling.
Mobile App Notification Badges
Mobile UI designers use the badge generator to prototype notification counts, unread indicators, and status dots for mobile app interfaces. The XS and SM sizes with the pill shape produce the familiar notification badge look that works on iOS and Android navigation elements.
CMS Content Labels and Tags
WordPress and CMS site builders use the badge generator to create category tags, post labels, and content type indicators. The subtle variant is perfect for blog post metadata - it provides visual distinction without the heaviness of filled badges, keeping the focus on the content.
Design System Token Badges
Design system maintainers use the badge generator to create consistent badge components that use design token colours. The generated CSS uses customisable class names and colour values that can be mapped to CSS custom properties, making it easy to theme badges across light and dark modes.
User Role and Permission Tags
SaaS applications use the badge generator to create user role badges - Admin, Moderator, Editor, Subscriber - with distinct colours for each role. The dot indicator option adds a visual status cue, and the close button option enables removable tag-style interfaces for filter chips and selection lists.
Understanding CSS Badge Components
What is a CSS Badge Component?
A badge (also called a pill, tag, chip, or label) is a small inline UI element used to label, categorise, or highlight content. Badges are typically compact, have a distinct background colour, and use rounded corners or pill shapes to stand out from surrounding content. Common examples include notification counters ("3"), status indicators ("Active", "Pending"), content labels ("New", "Sale"), and user role tags ("Admin"). Our badge generator creates production-ready HTML and CSS for badge components that can be used directly in any web project.
How Our Badge Generator Works
- Choose a Preset or Start Customising: Select from 12 presets covering common badge types - status colours (success, warning, error, info), visual variants (filled, outlined, subtle, ghost), sizes (XS to XL), and special features (dot indicator, close button, interactive hover effects). Each preset sets multiple properties at once for quick iteration.
- Customise Every Detail: Fine-tune the badge text, size, variant, shape (rounded, pill, or square), main colour, and text colour. Toggle optional features like a status indicator dot, a close/remove button with hover effect, or interactive hover and click states. The live preview updates in real-time as you adjust any setting.
- Copy the Generated Code: The badge generator provides clean, production-ready HTML and CSS output. Copy the HTML snippet, the CSS styles, or both together. The CSS includes proper inline-flex layout, font sizing, padding, border-radius, and hover states. Use the custom class name to integrate with your existing design system.
Badge Variants Explained
- Filled: Solid background with contrasting text. The most visually prominent badge variant. Use for primary actions, status indicators, and notification counters where the badge needs to stand out from surrounding content immediately.
- Outlined: Transparent background with a coloured border. The border colour matches the main colour, and text uses the same colour. Perfect for secondary information where you want the label to be visible without competing with primary content.
- Subtle: Light-tinted background with coloured text. Uses the main colour as a light background tint (the colour you provide is used as the background) with darker text. Ideal for category tags, metadata labels, and design system token badges where the badge should be visible but not dominant.
- Ghost: No background, just coloured text. The least visually prominent variant. Use for inline labels, secondary tags in dense interfaces, and situations where you want to indicate a category without adding visual weight.
Badge Accessibility Considerations
When using badges in your UI, consider these accessibility best practices: ensure sufficient colour contrast between the badge background and text (WCAG AA requires a 4.5:1 ratio for normal text); use the subtle variant with caution as the light background may not provide enough contrast on all screens; provide aria-labels for close buttons to assist screen reader users (our generated HTML includes aria-label="Remove"); avoid relying solely on colour to convey meaning - combine status badges with text labels for users with colour vision deficiencies; and ensure interactive badges have visible focus indicators for keyboard navigation.
Related Tools
Color Picker & Converter
Visual color picker with HEX, RGB, HSL, HSV, CMYK, HWB, and CIE LAB conversion. Bidirectional inputs, WCAG contrast checker, CSS variable output - free online color picker converter.
Color Name Finder
Enter any HEX or RGB color and instantly find the closest named color from 300+ CSS, X11, and Pantone color names. Search by name or browse the full database - free online color name finder.
Color Contrast Checker
Calculate WCAG 2.1 contrast ratio and check AA/AAA compliance for normal text, large text, and UI components - live preview, HEX and RGB input. Free online color contrast checker.
Color Difference Calculator (ΔE 2000)
Calculate the perceptual color difference (ΔE 2000 / CIEDE2000) between any two colors - enter HEX or RGB values and get the Delta-E score with a visual comparison and CIE L*a*b* breakdown. Free online color difference calculator.
Frequently Asked Questions About Badge Generator
A badge generator is a tool that creates CSS badge/pill components - small inline UI elements used for labels, tags, status indicators, and notification counters. Our badge generator lets you configure text, size (XS to XL), visual variant (filled, outlined, subtle, ghost), shape (rounded, pill, square), colours, and optional features like dot indicators, close buttons, and hover effects. The output is production-ready HTML and CSS that you can paste directly into your project.
The badge generator supports five sizes: XS (10px font, 1px/6px padding) for compact notification counters and inline badges; SM (11px) for subtle labels and metadata; MD (12px, default) for standard badges; LG (14px) for prominent labels and section headers; and XL (16px) for large badges and hero section tags. Each size adjusts font size, padding, dot size, and close button dimensions proportionally.
Filled badges have a solid background with contrasting text - the most prominent style. Outlined badges have a transparent background with a coloured border and text. Subtle badges use the main colour as a light background with coloured text. Ghost badges have no background at all, showing only coloured text for the least visual weight. Choose based on how much emphasis the badge needs.
Yes - the badge generator is 100% free with no signup, no account, and no usage limits. Generate as many badges as you need, completely free forever.
Copy the HTML snippet and place it where you want the badge to appear. Copy the CSS and paste it into your stylesheet or a CSS-in-JS solution. The CSS class name defaults to "custom-badge" but you can change it to match your project naming conventions. The generated CSS is self-contained - no external dependencies.
Yes. The generated CSS uses explicit colour values (hex codes) that you can change in your stylesheet. For design system integration, replace the hardcoded hex values with CSS custom properties like var(--color-primary) to enable theming across light and dark modes.
The dot indicator adds a small circle before the badge text using a CSS ::before pseudo-element. The dot uses the current text colour and its size scales with the badge size. It is commonly used for status indicators - a green dot for "Active", red for "Error", yellow for "Pending" - without needing additional HTML elements.
Interactive mode adds a cursor: pointer style, a hover effect that slightly raises the badge (translateY(-1px)) and reduces opacity to 85%, and a smooth CSS transition. This is ideal for clickable filter chips, tag selectors, and dismissible badges where the user interaction needs visual feedback.
Rounded has a 6px border-radius - a standard rounded rectangle. Pill uses 9999px border-radius, creating an oval/pill shape regardless of content size - this is the most common badge shape used in modern UI frameworks. Square uses 3px border-radius for a slightly softened square edge, giving a more subtle appearance suitable for data-dense interfaces.