CSS-генератор глассморфизма
Настройте размытие, прозрачность, рамку и тень, чтобы создать эффект матового стекла (глассморфизм), а затем скопируйте готовый CSS. Результат виден в реальном времени в вашем браузере, никакие данные не отправляются на сервер.
Как это работает
Глассморфизм сочетает три CSS-свойства: полупрозрачный фон, размытие заднего плана (backdrop-filter: blur()), которое делает матовым всё, что находится за элементом, и тонкую светлую рамку, имитирующую блик на краю «стекла». Двигайте ползунки, чтобы найти баланс между читаемостью текста и визуальным эффектом, а затем скопируйте CSS и примените его к своим карточкам, панелям навигации или модальным окнам.
Работает ли глассморфизм во всех браузерах?
Свойство backdrop-filter поддерживается всеми современными браузерами (Chrome, Firefox, Safari, Edge); созданный код включает префикс -webkit-backdrop-filter для лучшей совместимости с Safari. В очень старых браузерах элемент остаётся видимым, но без эффекта размытия.
На каком фоне этот эффект виден лучше всего?
Глассморфизм заметнее всего на контрастном или цветном фоне (градиент, изображение, иллюстрация) за элементом: на светлом однотонном фоне эффект размытия остаётся неброским. Всегда проверяйте читаемость текста на стеклянном элементе, прежде чем использовать его в реальном интерфейсе.
Генерация и предпросмотр выполняются на 100% локально: CSS вычисляется в вашем браузере по вашим настройкам, данные не отправляются.