Glass Card
Free
A frosted glass card with a lit rim and a soft shine that follows the pointer, with a solid fallback where blur isn't supported.
Now playing
Harbor at dawn
Lantern Valley OST
1:243:18
Customize
18px
0.08
#ffffff
0.18
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/glass-card.jsonWorks in any project set up with the shadcn CLI.
- Copy the code from the Code tab into
components/ui/glass-card.tsx.
Usage
import { GlassCard } from "@/components/ui/glass-card";
<GlassCard blur={20} opacity={0.1} className="p-6">
<h3>Season pass</h3>
<p>Level 14 of 50</p>
</GlassCard>Props
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Card content. |
| blur | number | 18 | Background blur in pixels. |
| saturation | number | 1.6 | Color boost for what shows through. 1 leaves it unchanged. |
| tint | string | "#ffffff" | Glass tint color, as hex. |
| opacity | number | 0.08 | Tint strength, 0 to 1. |
| borderOpacity | number | 0.18 | Rim highlight strength, 0 to 1. |
| shine | boolean | true | A soft light that follows the pointer inside the glass. |
| radius | number | 28 | Corner radius in pixels. |
| ...props | HTMLAttributes<HTMLDivElement> | — | Any native div attribute, such as className or role. |