CSS Badge Generator
Generate CSS for badges, labels and tags with custom colours, radius and size for status indicators and categories.
Last reviewed by the Radiatus Cloud team
Generate CSS badges and tags with custom colour, shape and size.
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Create badges and tags with CSS
Badges are small coloured labels that convey status, categories or counts, such as "New", "Sale" or an unread count. This generator produces clean badge CSS from your chosen background and text colours, shape and font size. You can make pill-shaped badges with fully rounded ends, gently rounded ones, or sharp square tags, and the single reusable class applies to any inline label.
Badges draw the eye to important metadata without taking much space, which is why they appear throughout interfaces.
Consistent status indicators
Defining a badge class and colour variants lets you communicate status consistently, for example green for success, amber for warning and red for error. Keep the text short and the contrast high so badges remain legible at their small size. Pill shapes read as soft and modern, while square tags feel more technical.
Create several colour variants from the base class for your different states and categories. All generation happens locally in your browser, so you can preview combinations before copying.
Notes on the generated code
Because the css badge generator runs entirely in your browser, you can experiment with every option and watch the generated code update instantly, with nothing uploaded and no account required. The output is clean, standards-based CSS that works in any project without external libraries or a build step, so you can paste it straight into your stylesheet and refine it further by hand whenever you need to.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
What is the difference between the shapes?
Pill badges have fully rounded ends, rounded badges have softly rounded corners, and square badges have sharp corners for a more technical look.
How do I make status variants?
Generate the base class, then create copies with different background colours, such as green, amber and red, for success, warning and error states.
Why keep badge text short?
Badges are small, so short text keeps them legible and compact. Long text defeats their purpose as quick visual indicators.
How do I ensure badges are readable?
Use a high-contrast combination of background and text colour so the small text stays legible against the badge background.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Choose the colour, shape and size, then copy the CSS.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.