How to create: Badge

Learn how to create badges with CSS.

Badges can be used to add additional information to elements/content:

Example heading New

Example heading New

Example heading New

Example heading New

Try it yourself

How to create a badge

Step 1 - Add HTML:

<span class="badge">New</span>

Step 2 - Add CSS:

.badge {
  background-color: red;
  color: white;
  padding: 4px 8px;
  text-align: center;
  border-radius: 5px;
{}

Try it yourself