Настройте размытие, прозрачность, цвет и скругление — получите CSS с backdrop-filter для эффекта матового стекла.
background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.3);
Glassmorphism — популярный приём дизайна: полупрозрачная панель с размытием фона под ней, как матовое стекло. Эффект строится на свойстве backdrop-filter: blur() в сочетании с полупрозрачным фоном и тонкой светлой рамкой. Инструмент собирает готовый CSS с живым превью.
Эффект заметен только поверх цветного или фотографического фона — на однотонном белом его не видно. Не переусердствуйте с размытием и прозрачностью: текст на стеклянной панели должен оставаться читаемым. Готовый CSS копируется одной кнопкой.
В современных — да. В очень старых версиях эффект может не отображаться, поэтому стекло стоит делать «украшением», а не основой интерфейса.
Размытие применяется к тому, что под панелью. Если под ней однотонный фон без деталей, размывать нечего. Поместите панель поверх картинки или градиента.
Может, если фон пёстрый. Добавьте достаточную непрозрачность панели и проверьте контраст текста.
Линейные градиенты с предпросмотром.
CSS-тени с живым предпросмотром.
Скругление углов с предпросмотром.
Контраст цветов по стандарту WCAG.
Оттенки и тона из базового цвета.
Иконки сайта всех размеров из картинки.