Есть ли CSS3 фильтр для превращения цветов с градиентами в сплошные цвета

Question

У меня есть особый случай, в котором я использую -webkit-mask с radial-gradient создать маленькие точки на фоновом изображении. Цвет этих точек transparent так что фоновое изображение можно увидеть внутри точек.

Теперь есть случай, когда цвет в каждой точке имеет градиент.

Есть ли возможность определить средний цвет в каждой точке и применить фильтр CSS, который показывает сплошной цвет?

Так что я хочу, чтобы у меня была точка с оттенками синего, тогда я хочу применить фильтр, который просто показывает сплошной синий цвет.

Вот скриншот такого случая:

Возможно ли это с помощью CSS без добавления отдельного элемента div для каждой точки и установки цвета фона CSS вручную? Или мне нужно поиграться с WebGL?

Answer 1

Со свойствами blend вы можете использовать только значение оттенка из базового элемента div

В этой демонстрации базовый элемент имеет градиент. наложение устраняет изменение яркости, применяя наложение яркости

div {
    height: 200px;
}
.base {
    width: 300px;
    background-image: linear-gradient(hsl(120, 50%, 60%),hsl(120, 100%, 90%));
}
.overlay {
   position: absolute;
    width: 100px;
    left: 100px;
    top: 10px;
    z-index: 2;
    border: solid 1px black;
    background-color: gray;
    mix-blend-mode: luminosity;
}

<div class="base"></div>
<div class="overlay"></div>