spangradientbeginner

Gradient Badge

A small gradient badge with bold text, perfect for labeling new features or premium content.

Preview
NEW
<span class="inline-block px-3 py-1 bg-gradient-to-r from-purple-600 to-pink-500 text-white text-xs font-bold rounded-full">NEW</span>

Color Breakdown

Gradient Start

from-purple-600

#9333ea

Gradient End

to-pink-500

#ec4899

Text

text-white

#ffffff

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:from-purple-500 dark:to-pink-400

Use Cases

New feature labelsPremium tagsProduct badges

Browser Support

All modern browsers.

Related Recipes

Gradient Button

button - beginner

Gradient Border Card

card - advanced

Image Overlay Card

card - intermediate

Gradient Hero Section

section - beginner

CTA Banner

section - beginner

Gradient Footer

section - beginner

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

How do I add a gradient badge to a card heading?▼
Place the span element inline next to or after the heading text with a ml-2 class for spacing.