Максим

https://codepen.io/topicstarter/pen/qgwqJR так ??

background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(255,255,255,0.8)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(rgb(255,255,255,0.8), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgb(255,255,255,0.8), rgba(255,255,255,0));
background-image: linear-gradient(rgb(255,255,255,0.8), rgba(255,255,255,0));

Источник : https://autoprefixer.github.io/ru/

https://codepen.io/topicstarter/pen/rPQYYQ если надо объяснения спрашивайте

https://blog.hellojs.org/flexbox-sticky-footer-and...

Этот механизм не от вас зависит ...а этот механизм сделан в браузере
К примеру Yandex браузер (писали в поддержку хотели узнать how do it) реализована пиксельное изъятие цвета
А вот Opera Chrome(Визуальные Вкладки)Firefox берут фавикон за основу ... делают минискриншот + название сайта с фавикон ...это сложно - в общем напишите в поддержку каждого браузера и вам опишут механизм

https://codepen.io/topicstarter/pen/rPpZoa такие вещи на SVG делаются как в лужу Пукнуть ... что и даёт нам возможность для работы с canvas и анимировать каждую деталь по отдельности

https://w3bits.com/css-masonry/
demo ; https://w3bits.com/demo/css-masonry/