Ефект Liquid Glass на CSS
Матові, викривлені чи хроматичні скляні поверхні — потягніть картку, щоб побачити заломлення, і скопіюйте готовий CSS.
Заломлення лінзи працює в браузерах на Chromium; Safari і Firefox показують звичайне матове розмиття.
Потягайте мене — скло заломлює все, що позаду.
Як працює генератор Liquid Glass
Створюйте поверхні в дусі Liquid Glass візуально — матовість, викривлення, хроматичне заломлення — і копіюйте готовий до продакшну CSS.
Три режими рендерингу
«Матове» — glassmorphism на чистому CSS, що працює всюди, зокрема в Safari. «Рідке» додає викривлення SVG-шумом — брижі, як на мокрому склі. «Лінза» будує мапу хроматичного заломлення — це найближче до вигляду Liquid Glass.
Шумове викривлення
Процедурна текстура feTurbulence зміщує розмитий фон: частота задає розмір брижів, а сила — наскільки сильно заломлюється світло.
Рухоме прев'ю
Скляна картка висить над барвистою сценою — перетягуйте її, щоб побачити, як матеріал заломлює різний вміст позаду.
Код для продакшну
Кожен режим експортує повний код, готовий до вставлення: CSS-клас і, за потреби, SVG-фільтр, а також запасні правила з -webkit- для Safari.
Часті запитання
Динамічна мова матеріалів, яку популяризувала Apple: напівпрозорі поверхні розмивають, насичують і злегка заломлюють вміст позаду себе, мають яскраві внутрішні краї та м'яку глибину. У вебі її відтворюють за допомогою backdrop-filter і SVG-фільтрів.
«Матове» — для всього критичного: воно працює в усіх сучасних браузерах. «Рідке» деградує м'яко: браузери, які не можуть застосувати SVG-фільтр, усе одно показують матове розмиття. «Лінза» — демонстрація лише для Chromium; залиште запасний рядок з -webkit- для Safari.
Мапа заломлення — це закодований SVG-градієнт під розмір елемента: вона підказує фільтру зміщення, де краї. Якщо змінюєте розмір елемента, згенеруйте код заново з відповідними шириною й висотою.
Розмиття й насичення обробляє GPU, тож для кількох елементів це дешево. Фільтри зміщення важчі — не анімуйте їх на великих поверхнях і обмежтеся однією-двома скляними панелями на екран.