В этой статье
Что такое глассморфизм и почему он работает
Глассморфизм — это тренд в UI-дизайне, основанный на эффекте матового стекла, размывающего фон за ним. Эффект создаёт ощущение глубины и иерархии, накладывая полупрозрачные панели на цветные фоны, придавая интерфейсам современный и отполированный вид. Apple популяризировала эту эстетику в macOS и iOS, и с тех пор она стала неотъемлемым элементом дизайна дашбордов, карточных макетов и модальных оверлеев по всему вебу.
CSS, лежащий в основе глассморфизма, сочетает полупрозрачный фоновый цвет с backdrop-filter blur и тонкой рамкой, имитирующей край стекла. Правильный баланс между прозрачностью, радиусом размытия и непрозрачностью рамки требует экспериментов. Визуальный генератор позволяет настраивать эти свойства в реальном времени и копировать точный CSS, когда эффект выглядит правильно, устраняя метод проб и ошибок при ручном кодировании значений.
Как использовать CSS-генератор глассморфизма
Генератор CheckTown предоставляет интерактивные элементы управления для каждого свойства эффекта стекла, чтобы вы могли визуально создать идеальную панель.
- Настраивайте ползунок радиуса размытия, чтобы контролировать степень размытия фона — более высокие значения создают более матовый вид, а более низкие сохраняют фон частично видимым
- Устанавливайте прозрачность фона с помощью ползунка непрозрачности — это определяет, какая часть фонового цвета видна сквозь стеклянную поверхность
- Тонко настраивайте непрозрачность и насыщенность рамки для создания тонкого стеклянного края, который ловит свет и отделяет панель от фона
- Скопируйте сгенерированный CSS одним кликом и вставьте прямо в вашу таблицу стилей — результат включает свойство backdrop-filter с вендорными префиксами для максимальной совместимости с браузерами
Попробуйте бесплатно — без регистрации
Открыть генератор глассморфизма →Советы по дизайну при использовании стеклянных эффектов
Глассморфизм выглядит впечатляюще при вдумчивом использовании, но несколько рекомендаций помогут избежать ухудшения читаемости или доступности.
- Обеспечьте достаточный контраст между текстом и стеклянной поверхностью — размытый фон может сделать светлый текст трудночитаемым, если прозрачность слишком высока. Проверяйте с помощью инструментов проверки контраста WCAG.
- Используйте глассморфизм умеренно — одна-две стеклянные панели на экране создают элегантный акцент. Применение эффекта к каждому элементу делает интерфейс загромождённым и медленным.
- Предусмотрите фолбэк со сплошным цветом для браузеров, не поддерживающих backdrop-filter — старые браузеры покажут полностью прозрачную панель без размытия, что может сделать контент нечитаемым без резервного фона
Часто задаваемые вопросы
Какие браузеры поддерживают backdrop-filter?
Backdrop-filter поддерживается во всех современных браузерах, включая Chrome, Firefox, Safari и Edge. Сгенерированный CSS включает префикс -webkit- для совместимости с Safari. Internet Explorer не поддерживает это свойство, но его мировая доля использования ничтожна.
Влияет ли глассморфизм на производительность?
Свойство backdrop-filter запускает композитинг на GPU, что может повлиять на производительность на слабых устройствах или при одновременном применении ко многим элементам. Для лучших результатов ограничьте стеклянные эффекты несколькими ключевыми элементами UI, такими как навигационные панели, модальные окна или hero-карточки, вместо применения ко всем компонентам на странице.
Можно ли использовать глассморфизм с тёмной темой?
Безусловно. Глассморфизм хорошо работает как в светлой, так и в тёмной теме. Для тёмной темы используйте более тёмный полупрозрачный фоновый цвет и немного увеличьте радиус размытия для сохранения эффекта матового стекла. Генератор позволяет предварительно просмотреть результат на любом фоновом цвете, чтобы точно настроить внешний вид для обеих тем.