Генератор glassmorphism
Создайте эффект матового стекла (размытие фона) с живым предпросмотром и готовым CSS.
- Мгновенно
- Бесплатно
- Приватно (обработка локально)
- Без регистрации
Эффект стекла без догадок
Задайте размытие, прозрачность, скругление и границу: панель матового стекла обновляется вживую на цветном фоне, а полный CSS (с префиксом Safari) готов к копированию.
-
Задайте размытие
Насколько размыт фон.
-
Настройте стекло
Прозрачность, скругление, граница, оттенок.
-
Скопируйте CSS
Примените к карточке или панели.
Сгенерированный CSS (по умолчанию)
| Свойство | Значение |
|---|---|
| background | rgba(255, 255, 255, 0.25) |
| backdrop-filter | blur(8px) |
| border-radius | 16px |
| border | 1px solid rgba(255, 255, 255, 0.18) |
Префикс -webkit-backdrop-filter добавляется для Safari. Эффект виден только на неоднотонном фоне. Всё генерируется локально.
Частые вопросы
Что такое glassmorphism?
Стиль интерфейса, имитирующий матовое стекло: полупрозрачная панель, размывающая то, что за ней, с тонкой светлой границей. Широко используется для современных карточек, панелей и окон.
Как эффект достигается в CSS?
С помощью backdrop-filter: blur(...), размывающего фон, полупрозрачной rgba-заливки, border-radius и светлой rgba-границы. Инструмент генерирует эти строки и префикс -webkit- для Safari.
Почему фон должен быть цветным?
Размытие видно, только если за панелью есть что размывать. На однотонном фоне эффект исчезает. Поэтому предпросмотр кладёт стекло на градиент.
Совместимо ли со всеми браузерами?
backdrop-filter хорошо поддерживается в современных браузерах (с -webkit- для Safari). Для очень старых предусмотрите чуть более плотную запасную заливку ради читаемости.