Генератор 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 — ваші кольори та значення ніколи не надсилаються на сервер, тож він працює приватно й навіть офлайн після завантаження сторінки.