Apple Glass Effect wraps any React content in a frosted glass panel rendered with layered CSS backdrop filters, specular highlights, and a subtle refraction gradient. Tint color, distortion strength, and border sharpness are all exposed as props. Built with React and Tailwind CSS. Use it for navigation bars, modals, or cards that need to feel translucent on top of a colored or photographic backdrop.
Installation
Usage
import { GlassContainer } from "@/components/ui/glass-container";<GlassContainer blur={3} variant="prominent" tint="warm">
<div className="text-white">Your content here</div>
</GlassContainer>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | Required | Content to be rendered inside the glass container. |
className | string | "" | Additional CSS classes to apply. |
variant | "default" | "prominent" | "regular" | "thin" | "default" | Predefined variants with different blur, opacity, and shadow configurations. |
blur | number | varies by variant | Backdrop blur amount in pixels. |
opacity | number | varies by variant | Opacity of the glass overlay. |
distortion | "none" | "subtle" | "medium" | "strong" | "medium" | Glass distortion effect intensity. |
tint | "neutral" | "warm" | "cool" | "vibrant" | "warm" | Color tint of the glass effect. |
border | boolean | true | Whether to show the glass border highlight. |
hover | boolean | true | Whether to enable hover effects (scale and shadow). |
glassOverlay | boolean | true | Whether to apply the tinted glass overlay. |
highlightColor | string | rgba(255,255,255,0.4) | Color of the specular highlights. |
highlightOpacity | number | 1 | Opacity of the highlight effect. |
innerGlowColor | string | rgba(255,255,255,0.1) | Color of the inner glow effect. |
innerGlowOpacity | number | 1 | Opacity of the inner glow effect. |
specularIntensity | number | 0.4 | Intensity of the specular highlights (0-1). |