Генератор глассморфизма
Создавайте панели из матового стекла: размытие, прозрачность, светящиеся рамки и мягкие тени — с живыми цветными сценами за стеклом.
Примечание: backdrop-filter требует префикс -webkit- для Safari — он включён в вывод.
Как использовать генератор глассморфизма
- Выберите цвет тонировки и установите прозрачность панели — меньшие значения выглядят более «стеклянно».
- Увеличьте размытие для матирования фона; добавьте насыщенность, чтобы цвета за стеклом сияли.
- Добавьте тонкую светлую рамку (полупрозрачный белый) для имитации блика края стекла.
- Настройте мягкую падающую тень и радиус углов, завершая эффект парения.
- Переключите фоновую сцену для проверки читаемости, затем скопируйте CSS или Tailwind код.
Об этом генераторе глассморфизма
Глассморфизм — это стиль UI, где панели выглядят как матовое стекло: полупрозрачный фон, размытие фона, тонкая светлая рамка и мягкая тень. Он стал мейнстрим-трендом дизайна для карточек, навбаров и модалок. Волшебный ингредиент — свойство backdrop-filter, применяющее эффекты к тому, что находится за элементом.
Этот генератор позволяет настроить каждый ингредиент — тонировку, прозрачность, размытие, насыщенность, светящуюся рамку, радиус и тень — над тремя цветными тестовыми сценами для реалистичной оценки эффекта. Вывод включает префикс -webkit-backdrop-filter для Safari. Ради доступности всегда проверяйте, что текст на стекле сохраняет достаточный контраст над пёстрыми фонами.
FAQ по глассморфизму
Какие браузеры поддерживают backdrop-filter?
backdrop-filter поддерживается всеми современными браузерами. Chrome и Edge поддерживают его без префикса; Safari требует префикс -webkit-, который генератор включает автоматически. В очень старых браузерах панель просто откатывается к полупрозрачному фону, что всё равно выглядит приемлемо.
Почему мой эффект стекла не отображается?
backdrop-filter работает только когда за элементом что-то есть — фоновое изображение, градиент или другой контент. Если элемент стоит на плоском сплошном фоне, размывать нечего. Также убедитесь, что фон панели имеет прозрачность (альфа ниже 100%), иначе фон полностью перекрыт.
Для чего функция saturate()?
saturate() усиливает (выше 100%) или приглушает (ниже 100%) цвета фона до размытия. Значения около 130–180% делают цвета за стеклом яркими и помогают эффекту матового стекла читаться чётко — фирменная часть облика глассморфизма.
Вреден ли глассморфизм для доступности?
Может быть, если текст расположен на сильно размытых, низкоконтрастных фонах. Держите прозрачность умеренной, используйте светящуюся рамку для определения краёв и тестируйте панель над самым пёстрым фоном, который она будет покрывать. Три встроенные сцены помогают проверить контраст до релиза.
Можно ли сочетать глассморфизм с Tailwind?
Да. Вкладка Tailwind выдаёт классы с произвольными значениями (bg-[rgba(...)], backdrop-blur-[12px] и т.д.), которые работают с Tailwind CSS v3+ без конфигурации.