badge pill status gradient radial semantic success danger status indicators with visual depth dashboard metric badges notification type indicators tag pills with premium feel flat solid-color badges look boring need status badges with 3D depth effect want gradient pill with configurable hotspot
Gradient Badge
Fetch snippet JSON:
curl https://webspire.de/snippets/decorative/gradient-badge.json Preview
Background
Customize
Quick Start
<span class="gradient-badge gradient-badge-success">Active</span>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- Size
- 923 bytes · 40 lines
- Custom Properties
-
--badge-from--badge-to--badge-hotspot-x--badge-hotspot-y - Classes
-
.gradient-badge.gradient-badge-success.gradient-badge-danger.gradient-badge-warning.gradient-badge-info
badge pill status gradient radial semantic success danger
Radial gradient with an off-center hotspot (65% 36% by default) creates a subtle 3D lighting effect on small badges. Brighter highlight near top-right, darker color at bottom-left. Four semantic presets included.
Status badges
<span class="gradient-badge gradient-badge-success">Active</span>
<span class="gradient-badge gradient-badge-danger">Overdue</span>
<span class="gradient-badge gradient-badge-warning">Pending</span>
<span class="gradient-badge gradient-badge-info">In Review</span>Custom brand color
<span class="gradient-badge"
style="--badge-from: oklch(0.65 0.22 280); --badge-to: oklch(0.5 0.25 280);">
Pro
</span>Large badge with shifted hotspot
<span class="gradient-badge px-4 py-1.5 text-sm"
style="--badge-hotspot-x: 30%; --badge-hotspot-y: 20%;">
Featured
</span>