Генератор глассморфизма
Создавайте UI-карточки из матового стекла с размытием фона, прозрачностью и границами, затем копируйте CSS.
Стеклянная карточка
Матовое стекло, парящее над ярким фоном.
—
Выводит и backdrop-filter, и -webkit-backdrop-filter. Примечание: backdrop-filter не поддерживается в старых браузерах (например, Firefox ниже 103); добавьте для них сплошной запасной фон.
О Генератор глассморфизма
Генератор глассморфизма создаёт эффект «матового стекла»: полупрозрачную панель, размывающую всё, что находится за ней. Ползунки управляют размытием и насыщенностью backdrop-filter, цветом и прозрачностью оттенка стекла, цветом и непрозрачностью границы, радиусом скругления углов и внешней тенью — каждое изменение отображается вживую поверх яркого фона, чтобы вы могли реалистично оценить эффект.
Четыре пресета качества — subtle, frosted, vivid и dark glass — дают проверенные сочетания для старта. Пресет dark показывает, как тот же приём адаптируется к тёмным интерфейсам, где тонкая светлая граница берёт на себя основную работу по отделению стекла от фона.
Сгенерированный CSS включает и backdrop-filter, и префикс -webkit-backdrop-filter, необходимый для Safari. Обратите внимание на оговорку о совместимости: старые браузеры (например, Firefox до версии 103) не поддерживают backdrop-filter, поэтому предусмотрите для них сплошной резервный фон.
Как использовать Генератор глассморфизма
- Начните с пресета — subtle, frosted, vivid или dark glass — либо со значений по умолчанию.
- Настройте размытие и насыщенность фильтра фона.
- Задайте цвет оттенка стекла и его прозрачность.
- Настройте цвет границы, её непрозрачность, радиус скругления углов и внешнюю тень контура.
- Скопируйте CSS — он уже включает свойство с префиксом -webkit- для Safari.