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

More Free Tools

🖼️ Resize ✂️ Crop 🗜️ Compress 🎨 Filters 🔄 Rotate 💧 Watermark 🌑 Shadow 📝 Overlay 🖼️ Border ⭕ Circle Crop 📱 QR Code 👨‍💻 Dev Tools 🔍 Search API 🍳 Kitchen Tools