Генератор гласморфізму

backdrop-filter: blur() — це CSS-властивість за ефектом замерзлого скла: напівпрозора панель розмиває все, що рухається позаду неї, а не просто пригашує суцільний колір. Проблема в тому, що якість розмиття майже неможливо оцінити на статичному зразку — вона переконує лише тоді, коли під нею щось справді рухається, як буде на реальній сторінці з контентом, відео чи анімованим hero-блоком. Цей генератор розміщує картку прев'ю над по-справжньому анімованим тлом замість нерухомого, тож те, що ви бачите під час перетягування повзунків, — це те, що реально побачать відвідувачі.

Тло — це справжня CSS-анімація: великий linear-gradient, намальований у 400% розміру елемента, з @keyframes, що зсуває background-position туди-сюди по колу — без циклу анімації на JavaScript, без canvas, лише та сама техніка безперервного background-position, що використовується в продакшн hero-секціях. Розмиття, колір і прозорість тонування, колір/прозорість/товщина підсвітки рамки, радіус кутів і м'якість тіні — усе це керує живими стилями картки, що пливе, а блок CSS для копіювання відображає ті самі значення.

Не кожен браузер підтримує backdrop-filter, тож генератор також видає справжній блок @supports not (backdrop-filter: blur(1px)) — не формальний жест, а робочий фолбек із власним кольором тла, обчисленим із вашої фактичної прозорості тонування. Оскільки прозорість без розмиття виглядає помітно гірше (усе позаду просвічує нерозмитим), фолбек автоматично підвищує альфа-канал понад обране вами тонування, а коментар у згенерованому CSS пояснює точно чому і на скільки.

Усе обчислюється й рендериться у вашому власному браузері: без завантажень, без акаунта, без звернень до сервера. Скопіюйте CSS, коли картка виглядає правильно, застосуйте до будь-якого елемента, що має лежати над фото, відео чи градієнтом, і залиште блок @supports, щоб старіші браузери отримали читабельну, щільнішу картку замість ледь помітної.