Генератор гласморфизма
Создавайте CSS-эффекты матового стекла с предпросмотром в реальном времени.
background: rgba(255, 255, 255, 0.2); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.3);
Рекомендуемые инструменты
Подборка полезных утилит
Создание эффекта матового стекла (glassmorphism) в CSS
Обзор
Glassmorphism — это вид матового стекла: полупрозрачная размытая панель, сквозь которую мягко просвечивает фон, популяризованная современными ОС. Воссоздать его в CSS — значит точно сочетать прозрачность фона, размытие подложки, тонкую границу и тень. Этот генератор даёт настраивать каждую часть с живым предпросмотром и копирует точный CSS, так что вы получаете эффект без проб и ошибок.
Как пользоваться (по шагам)
- 1
Задайте прозрачность и размытие
Настройте непрозрачность фона и размытие подложки, чтобы управлять степенью матовости стекла.
- 2
Настройте границу и тень
Добавьте тонкую светлую границу и мягкую тень, чтобы придать панели стеклянную кромку и глубину.
- 3
Скопируйте CSS
Вставьте сгенерированное правило на ваш элемент — убедитесь, что он лежит над цветным или графическим фоном, чтобы увидеть эффект.
Как это работает
Эффект накладывает несколько CSS-свойств: полупрозрачный цвет фона, backdrop-filter: blur() для матирования того, что за элементом, тонкую светлую границу, ловящую «кромку» стекла, и мягкую тень для глубины. Вы регулируете размытие, прозрачность и цвет ползунками, пока предпросмотр над фоном показывает результат, затем копируете сгенерированное правило в таблицу стилей.
Когда пригодится
Оформить карточку, навбар или модалку, парящую над цветным фоном или изображением. Придать интерфейсу современную многослойную глубину. Повторить стиль матовых панелей iOS или Windows. Создать оверлей, остающийся читаемым и показывающий содержимое за ним. Прототипировать стеклянный эффект до закрепления в коде. Понять, как сочетаются backdrop-filter и прозрачность.
Частые вопросы
backdrop-filter размывает только содержимое за элементом, поэтому за ним нужно что-то цветное или изображение — над чисто белым фоном матировать нечего. Также убедитесь, что фон элемента полупрозрачный, а не сплошной.
Важные замечания
backdrop-filter нагружает GPU; много стеклянных панелей на странице, особенно анимированных или при прокрутке, могут замедлить отрисовку на слабых устройствах. Применяйте эффект экономно, на ключевых элементах.