Как пользоваться: Генератор глассморфизма
- Настройте размытие, насыщенность и прозрачность фона, пока карточка не будет выглядеть нужным образом на примере фона.
- Переключите фон предпросмотра, чтобы проверить читаемость на пестрых изображениях или тёмных темах.
- Скопируйте CSS (с префиксом и запасным вариантом) или классы Tailwind с произвольными значениями.
- Помните: эффект виден только тогда, когда за элементом есть что-то цветное.
Что такое глассморфизм?
Глассморфизм — это стиль матового стекла, популярный в macOS и Windows 11: полупрозрачная панель размывает всё, что находится за ней, обычно с тонкой светлой рамкой и мягкой тенью. В CSS он создаётся с помощью backdrop-filter: blur() и полупрозрачного цвета фона.
Разбор CSS
background: rgba(255,255,255,.18)— оттенок. Если фон слишком непрозрачный, размытие пропадает; если слишком прозрачный, текст тяжело читать.backdrop-filter: blur(12px) saturate(160%)— размывает и немного усиливает цвета за элементом, благодаря чему стекло не выглядит серым.-webkit-backdrop-filter— Safari всё ещё требует префикс для стабильной поддержки. Это строка, которую разработчики чаще всего забывают.- Тонкая полупрозрачная белая рамка 1px задаёт границу стекла.
Производительность и доступность
Размытие фона сильно нагружает GPU: избегайте больших размытых областей с анимацией или поверх видео и проверяйте прокрутку на слабых телефонах. Всегда проверяйте контраст текста на самом сложном участке фона с помощью проверки контраста, а также сохраняйте правило запасного фона, чтобы в браузерах без поддержки был читаемый и более непрозрачный фон.
В Webflow
В панели стилей Webflow в разделе Effects есть опция Backdrop filters — добавьте там Blur (и Saturate), задайте цвет фона с альфа-каналом, и Webflow сформирует нужный CSS.
Также ищут как: backdrop-filter, blur фон css, эффект стекла css, webkit-backdrop-filter.
Инструменты, которые хорошо сочетаются с Генератор глассморфизма
- Генератор box-shadow — Добавляйте несколько слоёв теней, меняйте смещение, размытие, spread и непрозрачность на живой карточке, затем скопируйте CSS для box-shadow или text-shadow.
- Генератор CSS-градиентов — Создайте градиент визуально: перетаскивайте цветовые стопы, меняйте угол или тип, начните с готового пресета — и скопируйте готовый CSS с запасным сплошным цветом.
- Генератор произвольных значений Tailwind — Вставьте CSS и сразу получите правильный синтаксис скобок Tailwind: пробелы заменяются на подчёркивания, добавляются подсказки типа, неподдерживаемые свойства оборачиваются как произвольные свойства.
- HEX в RGBA конвертер — Вставьте HEX-код, передвиньте ползунок прозрачности и скопируйте нужный CSS: классический rgba(), современный rgb( / alpha) или 8-значный HEX.
Часто задаваемые вопросы
Почему backdrop-filter не работает?
-webkit- для Safari.Поддерживается ли backdrop-filter во всех браузерах?
В чём разница между filter: blur и backdrop-filter: blur?
filter размывает сам элемент, включая его текст. backdrop-filter размывает только то, что находится за элементом, оставляя его содержимое чётким.