Glassmorphism Card
Glass Card
This card has a frosted glass effect using backdrop-filter.
<div style="background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);border-radius:16px;padding:24px;color:#fff;max-width:320px"><h3 style="margin:0 0 8px;font-size:1.2em">Glass Card</h3><p style="margin:0;opacity:0.8;font-size:0.9em">This card has a frosted glass effect using backdrop-filter.</p></div>Customize
px
px
px
Props
| Name | Type | Default | Description |
|---|---|---|---|
text | text | Glass Card | Displayed text |
blurAmount | slider (px) | 10px | Background blur amount |
borderRadius | slider (px) | 16px | Corner roundness |
padding | slider (px) | 24px | Inner spacing |
Frosted glass card