GlassCard
Frosted glass container using backdrop-filter: blur with configurable tint and blur intensity.
Use and inspectUse this pattern for the stated interaction and keep its keyboard path visible. Reset preview remounts the local example; it does not establish production persistence or a backend integration. Add a reduced-motion fallback where the source animates.Next: inspect the source and adapt its event or data boundary.
GlassCardFrosted glass container using backdrop-filter: blur with configurable tint and blur intensity.
type GlassCardProps = {
children: React.ReactNode;
blur?: number;
tint?: "light" | "dark" | "none";
};
export function GlassCard({ children, blur = 16, tint = "light" }: GlassCardProps) {
return (
<div
className={`sk-glass sk-glass--${tint}`}
style={{
backdropFilter: `blur(${blur}px)`,
WebkitBackdropFilter: `blur(${blur}px)`,
}}
>
{children}
</div>
);
}
/* CSS required:
.sk-glass--light {
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
}
.sk-glass--dark {
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
}
*/Props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | React.ReactNode | — | Card content |
blur | number | 16 | Blur radius in pixels |
tint | "light" | "dark" | "none" | "light" | Background tint color |