AstroGlass реализует современный подход к glassmorphism — создание интерфейсов, которые выглядят многослойными, прозрачными и премиальными.
Рецепт
Эффект glassmorphism достигается четырьмя CSS-свойствами:
- Размытие фона:
backdrop-filter: blur(12px)для эффекта матового стекла. - Полупрозрачность: Фоновые цвета с альфа-каналом (например,
bg-white/10). - Рамки: Тонкие 1px рамки (
border-white/20) определяют границы. - Тени: Мягкие цветные тени создают глубину.
Практическое использование
<div class="backdrop-blur-xl bg-white/5 border border-white/10 rounded-2xl shadow-lg"> Glassmorphic контейнер</div>Вариации по темам
| Тема | Стиль стекла |
|---|---|
| Liquid | Органические формы с жидкими фонами |
| Glass | Классические матовые панели с глубиной |
| Neo | Смелый контраст с резкими краями |
| Luxury | Золотистая полупрозрачность |
| Minimal | Тонкая, едва заметная прозрачность |
| Aurora | Градиентные фоны с геометрией |
💡
Настройка эффектов
Интенсивность размытия, прозрачности и рамок можно настроить через CSS-переменные в src/styles/_themes.css.