Генератор CSS glassmorphism

Цей інструмент створює CSS-ефект матового скла (glassmorphism), поєднуючи напівпрозорий фон із backdrop-filter: blur() — пересуньте повзунки над кольоровим прикладом, щоб побачити, як скляна картка розмиває все, що позаду, а потім скопіюйте CSS. Він також видає префікс -webkit-backdrop-filter, потрібний для Safari, оскільки backdrop-filter там досі його вимагає.

Що це за інструмент?

Glassmorphism — це стиль інтерфейсу, у якому елемент виглядає як матове скло: напівпрозорий фон дозволяє кольорам позаду просвічувати, а backdrop-filter: blur() розмиває це тло, щоб воно читалось як скло, а не звичайна прозора панель. Тонка напівпрозора рамка й заокруглені кути зазвичай завершують вигляд.

Цей інструмент дозволяє створити цей ефект візуально. Приклад розташований на тлі рухомого градієнта саме для того, щоб розмиття було видно — glassmorphism коректно читається лише над чимось кольоровим чи деталізованим, а не на однотонній білій сторінці. Налаштуйте прозорість кольору фону, силу розмиття, прозорість рамки та радіус кутів, а потім скопіюйте згенерований CSS.

Джерело: Filter Effects Module Level 1, W3C — специфікація, що визначає backdrop-filter, властивість, на якій побудований цей ефект.

Навіщо його використовувати?

Живий перегляд на кольоровому анімованому тлі, тож ви бачите справжній ефект матового скла, а не вгадуєте значення розмиття на порожньому фоні.
Повний контроль над прозорістю фону, силою розмиття тла, прозорістю рамки й радіусом заокруглення в одному місці.
Автоматично видає і backdrop-filter, і префікс -webkit-backdrop-filter, тож ви не забудете про підтримку Safari.
Працює повністю у вашому браузері — жодні налаштування нікуди не завантажуються.
Безкоштовно, без реєстрації, працює на мобільних.

Як користуватися

Виберіть колір фону й налаштуйте його прозорість — нижча прозорість (10–25%) читається як скло; вища виглядає радше як суцільна тонована панель.
Збільшіть силу розмиття, щоб розмити те, що позаду елемента — саме це й створює ефект матового скла, на відміну від самої прозорості.
Налаштуйте прозорість рамки, щоб додати тонкий світлий контур — це допомагає скляній картці читатись як окрема поверхня, а не зливатися з фоном.
Встановіть радіус заокруглення — картки glassmorphism майже завжди заокруглені, рідко з гострими кутами.
Скопіюйте згенерований CSS і вставте його у свою таблицю стилів. Пам'ятайте: елементу потрібне щось кольорове чи текстуроване позаду — glassmorphism непомітний на однотонному фоні.

Приклад

Введення

Фон: білий з прозорістю 20% · Розмиття: 10px · Прозорість рамки: 30% · Радіус: 16px

Результат

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

Класичний стиль картки з матовим склом, який використовують у формах входу, навігаційних панелях та віджетах дашбордів на кольоровому фоні або фото.

Підтримка в Safari та браузерах

backdrop-filter підтримується в актуальних версіях Chrome, Firefox, Edge і Safari, але Safari історично вимагав префікс -webkit-backdrop-filter поряд із непрефіксованою властивістю, щоб відобразити розмиття — без нього старіші версії Safari тихо ігнорували розмиття й показували лише плаский прозорий фон. Саме тому цей інструмент завжди видає обидва оголошення.

Актуальну інформацію про підтримку в браузерах дивіться в документації MDN про backdrop-filter: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

Чому glassmorphism потребує чогось позаду

backdrop-filter розмиває лише те, що візуально знаходиться позаду елемента — фонове зображення, градієнт, інший кольоровий елемент або вміст, що прокручується під ним. На однотонному білому чи одноколірному фоні розмивати нічого, тож ефект непомітний, і елемент просто виглядає як злегка тонований заокруглений блок. Завжди розміщуйте елементи glassmorphism на градієнті, фото чи іншому насиченому фоні, щоб ефект читався.

Поєднання з іншими CSS-ефектами

Картки glassmorphism часто поєднують із легкою тінню box-shadow для додаткової глибини. Створіть CSS матового скла тут, а потім додайте м'яку тінь за допомогою генератора box-shadow і застосуйте обидва оголошення до одного елемента.

→ Генератор box-shadow · Генератор border-radius

Часті запитання

Чому ефект скла не з'являється на моїй сторінці?

backdrop-filter розмиває те, що позаду елемента. Якщо ваш елемент розташований на однотонному білому чи суцільному фоні, розмивати нічого цікавого, тож він виглядає лише як тьмяно тонований блок. Розмістіть його на градієнті, зображенні чи іншому деталізованому фоні, щоб ефект матового скла став видимим.

Чи потрібен мені префікс -webkit-backdrop-filter?

Так, якщо ви хочете, щоб ефект надійно відображався в Safari. Цей інструмент завжди видає разом і стандартний backdrop-filter, і версію з префіксом -webkit-, оскільки Safari історично потребував префікс для застосування розмиття.

У чому різниця між прозорістю фону та розмиттям?

Прозорість фону контролює, скільки обраного вами кольору-тону показується, а скільки того, що позаду, просвічує без змін. Розмиття контролює, наскільки те видиме тло розмазане/пом'якшене. Glassmorphism використовує обидва разом — певну прозорість плюс певне розмиття — а не щось одне окремо.

Чи можна застосувати backdrop-filter до будь-якого елемента?

Так, але він впливає лише на те, що візуально позаду цього елемента в рендерингу сторінки, а не на його власних дочірніх елементів. Він також має вартість продуктивності на деяких пристроях при застосуванні до багатьох елементів або частій анімації, тож його краще використовувати для невеликої кількості помітних елементів інтерфейсу, як картки, модальні вікна чи навігаційні панелі, а не для десятків дрібних елементів.

Чому моя рамка ледь помітна?

Рамка в цьому інструменті використовує напівпрозорий білий колір, і це навмисно тонко — легкий контур, який допомагає скляній панелі читатись як окрема поверхня, не виглядаючи як жорсткий непрозорий обвід. Підвищіть повзунок прозорості рамки, якщо хочете помітніший контур.