Генератор на 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 блока, за да получат по-старите браузъри четлива, по-непрозрачна карта вместо едва видима.