Генератор гласморфізму
Створюйте UI-картки з матового скла з розмиттям тла, прозорістю та рамками, а потім копіюйте CSS.
Скляна картка
Матове скло, що ширяє над яскравим тлом.
-
Виводить водночас backdrop-filter і -webkit-backdrop-filter. Зверніть увагу: backdrop-filter не підтримується в старих браузерах (наприклад, Firefox до 103); додайте суцільне запасне тло для них.
Про Генератор гласморфізму
Генератор glassmorphism створює ефект «матового скла»: напівпрозору панель, що розмиває все, що знаходиться позаду неї. Повзунки керують розмиттям і насиченістю backdrop-filter, кольором відтінку скла та його прозорістю, кольором і непрозорістю рамки, радіусом кутів і зовнішньою тінню: кожна зміна відображається в реальному часі на яскравому фоні, щоб ви могли реалістично оцінити ефект.
Чотири готові пресети якості (subtle, frosted, vivid і dark glass) дають перевірені комбінації для старту. Пресет dark показує, як той самий підхід адаптується до темних інтерфейсів, де ледь помітна світла рамка виконує основну роботу з відокремлення скла від фону.
Згенерований CSS містить як backdrop-filter, так і префікс -webkit-backdrop-filter, необхідний для Safari. Зверніть увагу на застереження щодо сумісності: старіші браузери (наприклад, Firefox до версії 103) не підтримують backdrop-filter, тож для них варто передбачити суцільний резервний фон.
Як використовувати Генератор гласморфізму
- Почніть із пресету (subtle, frosted, vivid або dark glass) або зі стандартних налаштувань.
- Налаштуйте розмиття та насиченість фонового фільтра.
- Задайте колір відтінку скла та його прозорість.
- Налаштуйте колір рамки, непрозорість рамки, радіус кутів і контурну тінь.
- Скопіюйте CSS: він уже містить властивість із префіксом -webkit- для Safari.