Генератор глассморфизма CSS

Этот инструмент создаёт CSS-эффект матового стекла (глассморфизм), сочетая полупрозрачный фон с backdrop-filter: blur() — двигайте ползунки над цветным предпросмотром, чтобы увидеть, как стеклянная карточка размывает то, что находится позади неё, а затем скопируйте CSS. Также он выводит префикс -webkit-backdrop-filter, который до сих пор нужен Safari.

Что это за инструмент?

Глассморфизм — это стиль интерфейса, при котором элемент выглядит как матовое стекло: полупрозрачный фон позволяет проступать цветам позади него, а backdrop-filter: blur() размывает этот фон, из-за чего он читается как стекло, а не как обычная прозрачная панель. Тонкая полупрозрачная граница и скруглённые углы обычно завершают этот образ.

Этот инструмент позволяет создать такой эффект визуально. Предпросмотр специально размещён поверх движущегося градиентного фона, чтобы размытие было видно — глассморфизм читается правильно только на фоне с цветом или деталями, а не на плоской белой странице. Настройте прозрачность цвета фона, силу размытия, прозрачность границы и радиус скругления углов, а затем скопируйте сгенерированный CSS.

Источник: Filter Effects Module Level 1, W3C — определяет backdrop-filter, свойство, на котором построен этот эффект.

Зачем его использовать?

Живой предпросмотр на фоне яркого анимированного градиента, чтобы вы действительно видели эффект матового стекла, а не подбирали значения размытия на пустом фоне.
Полный контроль над прозрачностью фона, силой размытия backdrop-filter, прозрачностью границы и border-radius в одном месте.
Автоматически выводит и backdrop-filter, и префикс -webkit-backdrop-filter, чтобы вы не забыли про поддержку Safari.
Работает полностью в вашем браузере — ничего из настроенного никуда не загружается.
Бесплатно, без регистрации, работает на мобильных.

Как использовать

Выберите цвет фона и настройте его прозрачность — низкая прозрачность (10–25%) читается как стекло, высокая больше похожа на сплошную окрашенную панель.
Увеличьте силу размытия, чтобы размыть то, что находится за элементом — именно это создаёт эффект матового стекла, в отличие от одной лишь прозрачности.
Настройте прозрачность границы, чтобы добавить тонкий светлый край — это помогает стеклянной карточке читаться как отдельная поверхность, а не сливаться с фоном.
Задайте border-radius для скруглённых углов — карточки в стиле глассморфизма почти всегда скруглены и редко бывают с острыми углами.
Скопируйте сгенерированный CSS и вставьте его в свою таблицу стилей. Помните, что за элементом должно быть что-то с цветом или текстурой — на плоском однотонном фоне глассморфизм невидим.

Пример

Ввод

Фон: белый при 20% непрозрачности · Размытие: 10px · Прозрачность границы: 30% · Радиус: 16px

Результат

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

Классический стиль карточки из матового стекла, который используется в панелях входа, навигационных панелях и виджетах дашбордов на цветном или фотографическом фоне.

Поддержка Safari и других браузеров

backdrop-filter поддерживается в актуальных версиях Chrome, Firefox, Edge и Safari, но исторически Safari требовал префикс -webkit-backdrop-filter наряду со свойством без префикса, чтобы отрисовать размытие — без него старые версии Safari молча игнорируют размытие и показывают только плоский прозрачный фон. Поэтому этот инструмент всегда выводит оба объявления.

Актуальные сведения о совместимости с браузерами смотрите в документации MDN по backdrop-filter: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

Почему глассморфизму нужно что-то позади

backdrop-filter размывает только то, что визуально находится позади элемента — фоновое изображение, градиент, другой цветной элемент или прокручивающийся под ним контент. На простом белом или однотонном фоне размывать нечего, поэтому эффект невидим, а элемент выглядит просто как слегка тонированный скруглённый прямоугольник. Всегда размещайте элементы с глассморфизмом поверх градиента, фотографии или другого насыщенного деталями фона, чтобы эффект был заметен.

Сочетание с другими CSS-эффектами

Карточки в стиле глассморфизма часто сочетают с тонкой тенью снизу для дополнительной глубины. Сгенерируйте здесь CSS матового стекла, затем добавьте мягкую тень с помощью Генератора box-shadow и примените оба объявления к одному и тому же элементу.

→ Генератор box-shadow · Генератор border-radius

Часто задаваемые вопросы

Почему стеклянный эффект не появляется на моей странице?

backdrop-filter размывает то, что находится позади элемента. Если ваш элемент расположен поверх простого белого или однотонного фона, там нечего размывать визуально интересного, поэтому он выглядит просто как слегка тонированный прямоугольник. Разместите его поверх градиента, изображения или другого насыщенного фона, чтобы эффект матового стекла был виден.

Нужен ли мне префикс -webkit-backdrop-filter?

Да, если вы хотите, чтобы эффект надёжно отображался в Safari. Этот инструмент всегда выводит вместе стандартный backdrop-filter и версию с префиксом -webkit-, поскольку Safari исторически требовал этот префикс для применения размытия.

В чём разница между прозрачностью фона и размытием?

Прозрачность фона определяет, насколько заметен выбранный вами оттенок и насколько неизменённым просвечивает то, что позади. Размытие определяет, насколько этот видимый фон смазан/смягчён. Глассморфизм использует оба параметра вместе — частичную прозрачность и частичное размытие, — а не только один из них.

Можно ли применять backdrop-filter к любому элементу?

Да, но он влияет только на то, что визуально находится позади этого элемента в рендеринге страницы, а не на дочерние элементы самого элемента. Также он может снижать производительность на некоторых устройствах при применении к множеству элементов или частой анимации, поэтому лучше использовать его для небольшого числа заметных элементов интерфейса — карточек, модальных окон или навигационных панелей, — а не для десятков мелких элементов.

Почему моя граница почти не видна?

Граница в этом инструменте использует полупрозрачный белый цвет, что сделано намеренно сдержанно — это светлый край, который помогает стеклянной панели читаться как отдельная поверхность, не выглядя жёстким непрозрачным контуром. Увеличьте ползунок прозрачности границы, если хотите более заметный край.