Генератор glassmorphism

Filter размывает сам элемент вместе с его содержимым, включая текст. Backdrop-filter размывает то, что находится ЗА элементом, а содержимое остаётся резким. Для стекла нужен именно второй: карточка размывает фотографию под собой, но надпись на карточке читается чётко.

Три частые причины. У элемента непрозрачный фон — тогда размывать нечего, заливка должна быть полупрозрачной. За элементом однотонный фон — размытие ровного цвета даёт тот же ровный цвет. Либо у родителя стоит overflow: hidden вместе с transform, что в части браузеров обрывает слой подложки.

Во всех актуальных браузерах: Chrome с 76-й версии, Safari с 9-й под префиксом и с 18-й без него, Firefox с 103-й. Проблемы остаются на старых сборках и в некоторых встроенных вебвью. Поэтому в выдаваемом коде стоит блок @supports: без поддержки карточка получает плотную непрозрачную заливку и выглядит нормально, просто без размытия.

Потому что фон под ним не постоянный: на светлом участке фотографии белая надпись пропадает, на тёмном — чёрная. Правило простое: чем прозрачнее стекло, тем ниже гарантированный контраст. Практичные способы — поднять непрозрачность заливки выше 0,55, добавить под текст отдельную плашку или увеличить кегль. Проверка под предпросмотром показывает худший случай, а не средний.

Заметно. Backdrop-filter заставляет браузер перерисовывать слой подложки при каждом изменении, и на слабых устройствах это видно при прокрутке. Одна-две стеклянные карточки на экран проходят спокойно, десяток на длинной странице уже роняет плавность. Стеклянную шапку, висящую поверх прокручиваемого контента, стоит проверять на телефоне отдельно.

Насыщенность. Одно размытие делает подложку блёклой, потому что усредняет соседние пиксели. Добавление saturate возвращает цвету плотность, и стекло выглядит живее. Значение 1,3–1,8 работает хорошо, выше — цвет становится кислотным.

Нет, всё считается в браузере.