Генератор глассморфизма (матовое стекло)
Настраивайте размытие, прозрачность и границу, пока карточка не станет похожа на стекло поверх фона. Меняйте фон для проверки и копируйте CSS.
Как пользоватьсяЭффект матового стекла
Доступно на: 
Генератор глассморфизма (матовое стекло): для чего нужен
Настройте размытие, прозрачность, насыщенность, цвет стекла, границу и скругление углов. В предпросмотре карточка показана на градиенте с фигурами, на пейзаже, на тёмном фоне или на вашем собственном фото.
CSS создаётся с backdrop-filter и префиксом -webkit- для Safari, а также с более плотным запасным цветом для браузеров без поддержки размытия.
Как пользоваться
- Настройте размытие, прозрачность и границу.
- Смените фон предпросмотра или загрузите своё фото.
- Скопируйте CSS и примените класс стекла.
Когда использовать
- Шапки и меню со стеклянным фоном.
- Акцентные карточки поверх фото.
- Интерфейсы в современном стиле.
Частые вопросы
Почему стекло не видно?
Эффект заметен, только если за карточкой есть что-то цветное или детализированное: фото, градиент или фигуры. На гладком белом фоне матовое стекло выглядит как обычная белая карточка.
Влияет ли это на производительность?
Немного: браузеру нужно размывать всё, что находится позади. Используйте эффект на нескольких элементах (шапка, акцентные карточки) и избегайте его в длинных списках и на слабых телефонах.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.