Генератор Glassmorphism
Налаштуйте картку з ефектом матового скла — розмиття, відтінок, підсвічування меж, радіус кутів і тінь — із попереднім переглядом на справді анімованому тлі, щоб якість розмиття було видно в русі.
🔒 Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
backdrop-filter: blur() — це властивість CSS, що створює ефект матового скла: напівпрозора панель розмиває все, що рухається позаду неї, замість того щоб просто накладати однотонний колір. Складність у тому, що якість розмиття майже неможливо оцінити на статичному зразку; воно виглядає переконливо лише тоді, коли за ним щось справді рухається — як це буде на реальній сторінці з контентом, відео чи анімованим головним зображенням. Цей генератор розміщує картку попереднього перегляду над справді анімованим тлом замість нерухомого, тож те, що ви бачите, пересуваючи повзунки, і є тим, що насправді побачать відвідувачі.
Тло — це справжня CSS-анімація: великий linear-gradient, розтягнутий на 400% розміру елемента, з @keyframes, що циклічно зміщує його background-position вперед-назад — жодного циклу анімації на JavaScript, жодного canvas, лише та сама безперервна техніка background-position, яку використовують у промислових головних секціях. Розмиття, колір і непрозорість відтінку, колір/непрозорість/ширина підсвічування меж, радіус кутів і м’якість тіні — усе це безпосередньо керує живими стилями плавучої картки, а вікно CSS для копіювання точно відображає ті самі значення.
Не кожен браузер підтримує backdrop-filter, тому генератор також видає справжній блок @supports not (backdrop-filter: blur(1px)) — не формальну відписку, а резервне правило з власним кольором тла, обчисленим на основі вашої фактичної непрозорості відтінку. Оскільки напівпрозорість без розмиття виглядає помітно гірше (усе, що позаду, просвічується нерозмитим), резервний варіант автоматично підвищує альфа-канал понад обрану вами непрозорість відтінку, а коментар у згенерованому CSS пояснює, чому саме й наскільки.
Усе обчислюється та відображається у вашому власному браузері: без завантажень, без облікового запису, без звернень до сервера. Скопіюйте CSS, коли картка матиме бажаний вигляд, додайте до будь-якого елемента, який має розташовуватися над фото, відео чи градієнтом, і збережіть блок @supports, щоб старіші браузери отримали читабельну, більш непрозору картку замість ледь помітної.