116 lines
3.3 KiB
Markdown
116 lines
3.3 KiB
Markdown
---
|
|
name: glassmorphism
|
|
description: Creates frosted glass UI elements with blur, transparency, and subtle borders. Use when building overlays, floating controls, tooltips, or any element that should appear elevated with a translucent background.
|
|
---
|
|
|
|
# Glassmorphism Pattern
|
|
|
|
Create frosted glass effects for overlays and floating UI elements.
|
|
|
|
## Core Classes
|
|
|
|
```tsx
|
|
// Standard glassmorphic container
|
|
<div className="bg-black/20 backdrop-blur-md border border-white/10">
|
|
...
|
|
</div>
|
|
```
|
|
|
|
## Variations
|
|
|
|
### Dark Overlay (on images/media)
|
|
Best for controls overlaid on images or video.
|
|
|
|
```tsx
|
|
<div className="bg-black/20 backdrop-blur-md border border-white/10 rounded-full px-3 py-2">
|
|
{/* Content */}
|
|
</div>
|
|
```
|
|
|
|
### Light Overlay (on dark backgrounds)
|
|
```tsx
|
|
<div className="bg-white/10 backdrop-blur-md border border-white/20 rounded-xl px-4 py-3">
|
|
{/* Content */}
|
|
</div>
|
|
```
|
|
|
|
### Subtle Glass (minimal effect)
|
|
```tsx
|
|
<div className="bg-black/10 backdrop-blur-sm border border-white/5 rounded-lg px-3 py-2">
|
|
{/* Content */}
|
|
</div>
|
|
```
|
|
|
|
### Strong Glass (prominent effect)
|
|
```tsx
|
|
<div className="bg-black/40 backdrop-blur-lg border border-white/20 rounded-2xl px-5 py-4">
|
|
{/* Content */}
|
|
</div>
|
|
```
|
|
|
|
## Token Reference
|
|
|
|
| Property | Light Glass | Standard | Strong |
|
|
|----------|-------------|----------|--------|
|
|
| Background | `bg-black/10` | `bg-black/20` | `bg-black/40` |
|
|
| Blur | `backdrop-blur-sm` | `backdrop-blur-md` | `backdrop-blur-lg` |
|
|
| Border | `border-white/5` | `border-white/10` | `border-white/20` |
|
|
|
|
## Common Use Cases
|
|
|
|
### Carousel Indicators
|
|
```tsx
|
|
<div className="absolute bottom-3 left-1/2 -translate-x-1/2">
|
|
<div className="flex items-center gap-2 px-3 py-2 rounded-full bg-black/20 backdrop-blur-md border border-white/10">
|
|
{/* Indicator dots */}
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### Floating Action Button
|
|
```tsx
|
|
<button className="fixed bottom-6 right-6 p-4 rounded-full bg-black/20 backdrop-blur-md border border-white/10 hover:bg-black/30 transition-colors">
|
|
<Icon className="w-6 h-6 text-white" />
|
|
</button>
|
|
```
|
|
|
|
### Tooltip/Popover
|
|
```tsx
|
|
<div className="absolute top-full mt-2 px-3 py-2 rounded-lg bg-black/30 backdrop-blur-md border border-white/10">
|
|
<span className="text-white text-sm">Tooltip content</span>
|
|
</div>
|
|
```
|
|
|
|
### Navigation Bar (over hero)
|
|
```tsx
|
|
<nav className="fixed top-0 left-0 right-0 z-50 bg-black/10 backdrop-blur-md border-b border-white/10">
|
|
{/* Nav content */}
|
|
</nav>
|
|
```
|
|
|
|
## Text Contrast
|
|
|
|
When using glassmorphism, ensure text has sufficient contrast:
|
|
|
|
| Background Opacity | Text Color |
|
|
|-------------------|------------|
|
|
| `bg-black/10` - `bg-black/20` | `text-white` or `text-white/90` |
|
|
| `bg-black/30` - `bg-black/40` | `text-white` |
|
|
| `bg-white/10` - `bg-white/20` | `text-white` or `text-zinc-100` |
|
|
|
|
## Performance Note
|
|
|
|
`backdrop-blur` can impact performance on lower-end devices. Consider:
|
|
- Using smaller blur values (`backdrop-blur-sm`) for frequently updated elements
|
|
- Avoiding large glassmorphic areas that cover significant viewport
|
|
- Testing on mobile devices
|
|
|
|
## Checklist
|
|
|
|
- [ ] Background has transparency (e.g., `bg-black/20`)
|
|
- [ ] `backdrop-blur-*` applied for frosted effect
|
|
- [ ] Subtle border with transparency (`border-white/10`)
|
|
- [ ] Text has sufficient contrast
|
|
- [ ] Border radius matches design language
|
|
- [ ] Tested on lower-end devices for performance
|