Material Design CSS Badge Examples

Clean, flat badges following Google's Material Design principles with subtle elevation.
Click any badge to copy the CSS to your clipboard.

Primary

Secondary

Success

Error

Warning

Outlined

Tonal

#10

Chip

#11

Chip

#12

99+

#13

#14

Online

#15

Tag

#16

Badge

#17

New

#18

Create your own custom badge designs with these generators:

Create gradient badges

Add text gradients to badges

Browse badge examples in different design styles:

Soft UI with subtle shadows

Bold borders and stark contrast

Clean and simple

Vibrant color gradients

Extract any badge style in 2 clicks

Click any element on any website to get its badge styles instantly. Frontend Hero gives you 10+ essential developer tools in one browser extension.

Get Frontend Hero now →