CSS Badge Generator

Create status badges, notification dots, and tag components with customizable shapes and colors.

Presets

Settings

Badge Text Shape Font Size (px)

Padding X (px)

Padding Y (px)

Font Weight Border Width (px)

Status Dot

Uppercase

Background

Text Color

Border Color

Dot Color

Preview

Color Variants