Генератор CSS-глассморфизма

Что такое Генератор CSS-глассморфизма?

Генератор CSS-глассморфизма — это бесплатный визуальный редактор стиля интерфейса из матового стекла (глассморфизм), созданный для фронтенд-разработчиков и продуктовых дизайнеров. Настройте степень размытия, прозрачность поверхности, насыщённость цвета, толщину рамки, радиус углов и силу тени с помощью числовых полей и ползунков, затем выберите цвет оттенка с помощью образца. Панель предпросмотра в реальном времени показывает стеклянную панель поверх яркого градиентного фона, а полный CSS — с backdrop-filter, полупрозрачным фоном, тонкой рамкой и box-shadow — генерируется для копирования. Используйте его для создания стеклянных карточек, панелей навигации, модальных окон и оверлеев без ручной подгонки альфа-канала rgba и без необходимости помнить префикс -webkit-backdrop-filter.

Как пользоваться Генератор CSS-глассморфизма

1. Задайте Размытие (в px), чтобы определить, насколько сильно матируется область за панелью.
2. Понизьте Прозрачность, чтобы стекло было более просвечивающим, или повысьте её для более плотной поверхности.
3. Поднимите Насыщенность выше 100%, чтобы цвета фона ярче проступали сквозь стекло.
4. Выберите цвет оттенка с помощью образца и настройте ширину Рамки, Радиус и Тень, чтобы завершить образ.
5. Наблюдайте, как предпросмотр обновляется на фоне в реальном времени при изменении каждого значения.
6. Скопируйте сгенерированный CSS в свою таблицу стилей — он уже включает запасной вариант -webkit-backdrop-filter.

Примеры

размытие 12, прозрачность 25%, насыщенность 120%, радиус 16, рамка 1, тень 24

backdrop-filter: blur(12px) saturate(120%); background: rgba(255, 255, 255, 0.25); …

размытие 8, прозрачность 60%, насыщенность 100%, радиус 0, рамка 1, тень 8

backdrop-filter: blur(8px) saturate(100%); background: rgba(255, 255, 255, 0.6); …

оттенок #0f172a, размытие 20, прозрачность 30%, насыщенность 140%, радиус 24, тень 40

backdrop-filter: blur(20px) saturate(140%); background: rgba(15, 23, 42, 0.3); …

Часто задаваемые вопросы

Что делает backdrop-filter?

backdrop-filter применяет графические эффекты — здесь размытие и насыщенность — к тому, что находится позади элемента, и именно это создаёт вид матового стекла. Генератор выводит как backdrop-filter, так и префикс -webkit-backdrop-filter, чтобы это работало в разных браузерах, а также полупрозрачный фон, рамку и тень.

Зачем нужна настройка прозрачности?

Эффекту стекла нужен частично просвечивающий фон, чтобы размытый задний план был виден. Ползунок Прозрачности задаёт альфа-канал цвета фона панели (rgba): более низкие значения более прозрачны, более высокие — более непрозрачны и плотны.

Можно ли сделать цветное или тёмное стекло?

Да. Выберите любой цвет оттенка с помощью образца — инструмент подмешивает его в rgba-фон, поэтому вы можете создать тёплое, холодное или тёмное стекло. Сочетайте тёмный оттенок с более высокой прозрачностью для атмосферных оверлеев или оставьте белый цвет для классической матовой панели.

Будет ли это работать в каждом браузере?

Большинство современных браузеров поддерживают backdrop-filter. Сгенерированный CSS включает префикс -webkit-backdrop-filter для Safari и старых версий Chromium, но очень старые браузеры игнорируют его и просто показывают полупрозрачный фон без размытия.

Загружаются ли мои данные куда-либо?

Нет. Генератор работает целиком в вашем браузере на JavaScript — ваши цвета и значения никогда не отправляются на сервер, поэтому он работает приватно и даже офлайн после загрузки страницы.