Загрузка...
Загрузка...
Нашли баг, сбой или ошибку в работе reChecker? Есть предложение по улучшению? Напишите нам, чтобы мы проверили и исправили проблему в сервисе.
Создавайте эффект стекла (glassmorphism) с живым предпросмотром
Эффект размытого стекла — один из самых популярных трендов в UI дизайне. Создаёт ощущение глубины и элегантности.
background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
Glassmorphism Generator создаёт эффект матового стекла для UI-элементов. Настройте степень размытия, прозрачность фона, цвет и рамку — получите готовый CSS с backdrop-filter для карточек, модалок и панелей.
Glassmorphism — стиль UI-дизайна, имитирующий матовое стекло. Основан на полупрозрачном фоне с backdrop-filter: blur(), что размывает контент за элементом. Популярен в macOS, Windows 11, iOS и современных веб-интерфейсах для карточек, навигации и модальных окон.
Ключевые свойства: background с rgba/hsla (полупрозрачный цвет), backdrop-filter: blur() для размытия фона, border с полупрозрачной рамкой для эффекта преломления света, и border-radius для скругления. Дополнительно — box-shadow для глубины.
Увеличьте степень blur (12–20px) и/или непрозрачность фона. Используйте тёмный текст на светлом стекле или белый на тёмном. Проверяйте контраст через Color Contrast Checker. Добавьте лёгкую тень текста (text-shadow) для улучшения разборчивости.
backdrop-filter поддерживается в Chrome, Edge, Safari и Firefox 103+. Для Safari нужен префикс -webkit-backdrop-filter. Для старых браузеров предусмотрите fallback — непрозрачный фон через @supports not (backdrop-filter: blur(1px)).
backdrop-filter с blur вызывает перерисовку композитного слоя. На мобильных устройствах большие области размытия могут снижать FPS. Ограничьте размер стеклянных элементов, избегайте анимации blur и тестируйте на слабых устройствах.
Руководства и советы по теме
Другие полезные сервисы reChecker