glassmorphismlisted
Install: claude install-skill wzyxdwll/ccgx-workflow
# Glassmorphism Design Spec
## 4 Core Elements
1. **Transparency** — Semi-transparent backgrounds using `rgba()` or `hsla()` with alpha `0.05–0.4`
2. **Blur** — `backdrop-filter: blur()` ranging 8–40px for frosted-glass effect
3. **Border** — Subtle semi-transparent borders (`1px solid rgba(255,255,255,0.18)`) to define edges
4. **Shadow** — Soft layered `box-shadow` for depth separation from background
## CSS Tokens
Reference: [references/tokens.css](references/tokens.css)
Use CSS custom properties from `tokens.css` for consistent theming:
```css
@import 'references/tokens.css';
.glass-card {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: var(--glass-border);
border-radius: var(--glass-radius);
box-shadow: var(--glass-shadow);
}
```
## Component Examples
### Card
```css
.glass-card {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: var(--glass-border);
border-radius: var(--glass-radius);
box-shadow: var(--glass-shadow);
padding: 1.5rem;
}
```
### Navbar
```css
.glass-nav {
background: var(--glass-bg-heavy);
backdrop-filter: var(--glass-blur-strong);
-webkit-backdrop-filter: var(--glass-blur-strong);
border-bottom: var(--glass-border);
box-shadow: var(--glass-shadow);
position: sticky;
top: 0;
z-index: 100;
}
```
### Modal Overlay
```css
.glass-modal-backdrop {
background: rgba(0, 0, 0,