Генератор глассморфізму
Створюйте CSS для карток із ефектом матового скла: розмиття, прозорість, відтінок, рамка та радіус — прямо у вашому браузері.
🔒 Працює повністю у вашому браузері — нічого не завантажуєтьсяСтворіть поверхню з матового скла
Глассморфізм працює так: тло проглядає крізь напівпрозору поверхню, а розмиття пом'якшує те, що за нею. Результат може виглядати акуратно й сучасно, якщо використовувати його стримано. Цей генератор глассморфізму дає пряме керування найважливішими параметрами: відтінок, прозорість, розмиття тла, непрозорість рамки, радіус і тінь. Коли ви змінюєте значення, картка оновлюється на барвистому градієнті, тож ви можете оцінити, чи помітний ефект скла, не ускладнюючи читання вмісту.
Згенерований CSS містить background, backdrop-filter, відповідну властивість із префіксом
WebKit, ненав'язливу рамку, радіус заокруглення та тінь. Цих оголошень достатньо для багаторазової картки, навігаційної панелі, модального вікна, hero-накладки чи віджета панелі керування. Оскільки ефект — це чистий
CSS, немає зображень для експорту й серверної обробки. Браузер відображає попередній перегляд, а
кнопка копіювання записує текст CSS у буфер обміну.
Баланс між прозорістю та читабельністю
Найпоширеніша помилка глассморфізму — надто прозора картка. Низька непрозорість може виглядати вражаюче на порожньому попередньому перегляді, але справжнім заголовкам, підписам та іконам потрібно достатньо контрасту, щоб залишатися читабельними на будь-якому тлі. Збільшуйте непрозорість, коли тло строкате, зменшуйте, коли тло просте, і використовуйте рамку, щоб відокремити поверхню від схожих кольорів. Розмиття допомагає приглушити деталі за карткою, але не замінює перевірку контрасту.
Де використовувати ефект
Матове скло найкраще підходить для акцентних моментів: картка з тарифами над hero-градієнтом, плаваюча панель інструментів, підсумок профілю або модальне вікно над насиченою графікою. Воно стає хаотичним, коли кожен компонент використовує його одночасно. Скопіювавши CSS, протестуйте його в реальному макеті й додайте суцільне запасне тло, якщо ви підтримуєте старіші браузери чи дуже слабкі пристрої. Гарна скляна картка має створювати відчуття шарів, залишаючи ієрархію інтерфейсу та вміст чіткими.
Як користуватися
- Виберіть колір склаОберіть відтінок, що накладається на тло.
- Налаштуйте розмиття й непрозорістьВідрегулюйте прозорість, розмиття тла, інтенсивність рамки та радіус.
- Скопіюйте CSSВставте згенеровані стилі скляної картки у свій компонент.