Генератор CSS Glassmorphism

Настройте размытие, прозрачность, оттенок, рамку, радиус скругления и насыщенность — карточка с матовым стеклом обновляется в реальном времени на красочном фоне. Затем скопируйте CSS. Ничего не загружается.

Матовое стекло Предпросмотр

Фон

Размытие12px

Прозрачность15%

Насыщенность180%

Цвет оттенка

Рамка

Видимость рамки40%

Радиус скругления20px

Глубина тени30

Всё работает в вашем браузере. Без загрузки, без регистрации.

Как это работает

STEP 1

Двигайте ползунки

Задайте размытие, прозрачность, цвет оттенка, рамку, радиус скругления и насыщенность. Стеклянная карточка обновляется в реальном времени при перетаскивании.

STEP 2

Выберите фон

Переключите градиент за карточкой, чтобы оценить эффект матового стекла на светлом, тёмном и ярком фоне.

STEP 3

Скопируйте CSS

Скопируйте готовый CSS с backdrop-filter или скачайте файл .css. Всё генерируется на вашем устройстве.