CSS Badge Generator

Design a CSS badge or label with a live preview. Pick colours, shape and size, then copy the HTML and CSS for your project.

How to Use

1. Type the badge text.
2. Choose the shape: pill, rounded or square.
3. Pick the background and text colours.
4. Adjust the font size and padding with the sliders.
5. Press Copy HTML and CSS and paste the code into your page.

Key Features

• Live preview — the badge updates as you design.
• Three shapes — pill, rounded or square.
• Pure CSS — no images or JavaScript needed.
• Copy-ready — self-contained HTML and CSS snippet.
• 100% private — runs entirely in your browser; nothing is sent or stored.

FAQs

Where are badges used?

Badges highlight status or categories: “New”, “Sale”, version numbers, notification counts and tags.

Can I use my own class name?

Yes — rename .tfh-badge in both the HTML and CSS after copying.

How do I make the badge round?

Choose the pill shape with equal padding, or set a fixed width and height with a 50% border radius for a circular badge.

Will it work in emails?

Most email clients support basic background and border-radius styles, but test in your target clients first.

Is my data sent anywhere?

No. Everything runs entirely in your browser and never transmits or saves your entries.

Related Tools

Try these related tools: CSS Button Generator, Favicon Generator and Initials Avatar Generator.