Назад
CSSБесплатно

Glassmorphism CSS Generator

Создавайте эффект стекла (glassmorphism) с живым предпросмотром

Превью

Glassmorphism

Эффект размытого стекла — один из самых популярных трендов в UI дизайне. Создаёт ощущение глубины и элегантности.

Параметры стекла

10px
0.25
0.2
16px
0.1

Фон

CSS код

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 CSS Generator

Glassmorphism Generator создаёт эффект матового стекла для UI-элементов. Настройте степень размытия, прозрачность фона, цвет и рамку — получите готовый CSS с backdrop-filter для карточек, модалок и панелей.

Настройка backdrop-filter: blur()
Управление прозрачностью фона (rgba/hsla)
Настройка рамки и border-radius
Предпросмотр на фоновом изображении
Экспорт CSS с -webkit-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 и тестируйте на слабых устройствах.

Полезные статьи

Руководства и советы по теме

Glassmorphism эффект

Читать статью →

Связанные инструменты

Другие полезные сервисы reChecker

Box Shadow

Генератор CSS-теней

Попробовать →

CSS Filters

Песочница CSS-фильтров

Попробовать →

Border Radius

Генератор border-radius

Попробовать →