Эффект frosted glass — матового стекла, а не замороженного, как вы могли бы подумать — последнее время довольно популярен.
Вот только проблема в том, что он насколько популярен, настолько же и убог. Разработчики и дизайнеры просто размывают фон за полупрозрачным элементом, делая вид, что оптические эффекты их не касаются.
Джош Комо решил подойти к этой проблеме серьезно: https://www.joshwcomeau.com/css/backdrop-filter/
Что он заметил?
Когда смотришь сквозь настоящее матовое стекло, размытие неравномерное:
Чем дальше объект за стеклом, тем сильнее он размывается.
Блики и яркие детали распространяются по стеклу, создавая эффект светящегося ореола.
В итоге он решил применить фильтр для гораздо большей части изображения, а остальное — скрыть
маской:
.backdrop {
position: absolute;
inset: 0;
height: 200%;
backdrop-filter: blur(16px);
mask-image: linear-gradient(
to bottom,
black 0% 50%,
transparent 50% 100%
);
}
Звучит страшно, но на самом деле всё достаточно просто. В статье объясняются как базовые принципы использования фильтров и масок в CSS, так и неожиданные их комбинации.
#css #filter #glass