←
Glassmorphic Badge

Glassmorphic Badge

Design Tokens

Frosted glass pill badge with multi-layer backdrop filter blur, subtle border sheen, and glowing typography for section headers and status chips.

Interactive Playground & Studio

Live Controls
glass-badge.tsx
PROPRIETARY COMPONENT
Hover or click to interact
Customizer
PRESETS & VARIATIONS

All Variants & Themes

Click to test interactive spring physics on every theme

Vibrant Gradientvariant="gradient"
FEATURED

Multi-layer backdrop blur with glowing purple-indigo specular gradient sheen.

Laser Cyanvariant="cyan"
1:1 FIGMA

Electric cyan status badge with frosted glass diffusion and glowing beacon.

Obsidian Solidvariant="solid"
PRODUCTION READY

Minimalist dark translucent glass pill for clean technical documentation headers.

Features & Physics

✓Multi-layer backdrop filter blur
✓Cyan and vibrant gradient variants
✓Specular top border highlight sheen
✓Responsive typography and padding

Code & Integration

Customized live with your active playground prop settings:

import GlassBadge from "@/components/GlassBadge";

export default function Example() {
  return <GlassBadge variant="gradient" size="md">PROPRIETARY COMPONENT</GlassBadge>;
}

Peer Dependencies

Requires Framer Motion and Tailwind CSS for spring physics and layout tokens:

npm install framer-motion clsx lucide-react tailwind-merge

API & Props Reference

PropTypeDefaultDescription
variant"gradient" | "cyan" | "solid""gradient"Visual style variant.
size"xs" | "sm" | "md" | "lg" | "xl""md"Padding scale.