Сохраните этот пост, чтобы узнать, как создать эффект матового стекла, который имитирует изгиб света, а не просто размытие, используя SVG-фильтры и backdrop-filter. Это решение позволяет добиться более реалистичного эффекта, чем стандартный backdrop-filter: blur().
backdrop-filter: blur() создает плоский серый прямоугольник, потому что размытие усредняет пиксели, а не изгибает их, как настоящее стекло.
Используйте SVG-фильтр.
<filter><feTurbulence/> для создания шумовой текстуры.<feDisplacementMap/> для смещения каждого пикселя фона в сторону в соответствии с шумом.Объедините SVG-фильтр с backdrop-filter и blur.
Добавьте однопиксельный белый внутренний блик (inset highlight) для освещенного края, чтобы придать объекту толщину.
CSS, веб-разработка, дизайн, UI/UX, SVG, фильтры, матовое стекло, backdrop-filter, feTurbulence, feDisplacementMap
Пришлите ссылку на видео или пост — Skim прочитает его, расшифрует речь, снимет текст с экрана и соберёт из этого выжимку, по которой можно искать и задавать вопросы. Эта страница и есть одна такая выжимка.
Попробовать на своих ссылках