Дизайн / CSS

Генератор CSS для стекломорфизма (эффект матового стекла)

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

Генератор CSS для стекломорфизма (эффект матового стекла): backdrop-filter: blur() размывает всё, что находится за элементом, а saturate() делает эти цвета насыщеннее. Полупрозрачный фон придаёт стеклу оттенок, а тонкая светлая граница подчёркивает его края, как у настоящего стекла. Строка с префиксом -webkit- обеспечивает поддержку Safari до версии 18. Работает на 100% локально в вашем браузере, файлы на сервер не загружаются.

Категория
Инструменты для разработчиков
Запуски
В вашем браузере
Стоимость
Бесплатно · без регистрации
Доступность
Готово к использованию
Генератор стекломорфизмаЛокальная обработка

Полностью работает в браузере

Матовое стеклоЦвета за этой карточкой размыты.

CSS

.glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

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

Доступность

Некоторые пользователи включают уменьшение прозрачности в системных настройках. Медиа-запрос prefers-reduced-transparency, который поддерживается браузерами на основе Chromium, может заменить стекло сплошным фоном.

Сочетание с тенью

Мягкая широкая тень визуально отделяет карточку от фона; настройте её с помощью генератора теней блоков и замените строку box-shadow.

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

  1. Настройте размытие, прозрачность и насыщенность.
  2. Выберите оттенок, границу и радиус скругления.
  3. Скопируйте CSS и разместите элемент поверх красочного фона.

Конфиденциальность и ограничения

Всё выполняется в вашем браузере.

Похожие инструменты

Тень блокаCSS-градиентПаттерн CSS

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

Почему моё стекло выглядит обычно?

Позади него должно быть что-то красочное или детализированное: на однотонном фоне размытие нечего размывать.

Медленно ли работает backdrop-filter?

Он требует больше ресурсов, чем большинство CSS-свойств, особенно когда большие области прокручиваются поверх движущегося содержимого. Делайте размытые области небольшими и не накладывайте друг на друга слишком много таких элементов.

Хорошо ли читается текст?

Проверьте это: контраст меняется в зависимости от фона. Более тёмный оттенок, повышенная прозрачность или тень текста помогут улучшить читаемость.

Бесплатный инструмент · запусков: в вашем браузере · аккаунт не нужен