AstroGlass implements a modern take on glassmorphism — creating interfaces that feel layered, transparent, and premium.
The Recipe
The glassmorphism effect is achieved through four key CSS properties working together:
- Backdrop Blur: We use
backdrop-filter: blur(12px)for the frosted effect. - Translucency: Background colors use alpha channels (e.g.,
bg-white/10). - Borders: Subtle 1px borders (
border-white/20) define the edges. - Shadows: Soft, colored shadows create depth and elevation.
This combination creates a sense of hierarchy and modernity.
Practical Usage
In AstroGlass components, you’ll see this pattern applied as Tailwind utility classes:
<div class="backdrop-blur-xl bg-white/5 border border-white/10 rounded-2xl shadow-lg"> Glassmorphic container</div>For dark themes, the effect is often layered with gradient backgrounds:
<div class="bg-gradient-to-br from-white/5 to-white/[0.02] backdrop-blur-xl border border-white/10"> Dark glassmorphic card</div>Theme Variations
Each theme in AstroGlass interprets glassmorphism differently:
| Theme | Glass Style |
|---|---|
| Liquid | Organic shapes with fluid blob backgrounds |
| Glass | Classic frosted panels with depth |
| Neo | Bold contrast with sharp edges |
| Luxury | Gold-tinted translucency with premium shadows |
| Minimal | Subtle, barely-there transparency |
| Aurora | Gradient mesh backgrounds with geometric structure |
💡
Customizing Glass Effects
The intensity of blur, opacity, and border effects can be adjusted per-theme through the CSS variables in src/styles/_themes.css. Look for --glass-blur, --glass-opacity, and related custom properties.