Как сделать размытие фона как на яндекс дзене?

Question

[Eugene Chefranov]

Подскажите, как сделать размытие фона как у карточек новостей у Яндекс Дзене?



На самом яндексе цвет градиента в зависимости от картинки наверно рассчитывается на бэке. Но тут на тостере (этим летом) я где-то видел что такое проделывали через blur на чистом CSS (возможно + JS), но никак не могу найти этот топик.

Comments

[hckn]

Это картинки, неужели трудно посмотреть?

[Eugene Chefranov]

hckn, я так и написал что на яндекс картинки такие генерятся на бэке, но мне необходимо было решение на JS или средствами CSS

[hckn]

Eugene Chefranov, ты написал

наверно рассчитывается

НАВЕРНОЕ? Т.е. по твоему в браузере картинка магическим образом такая может генерироватся?

[Eugene Chefranov]

hckn, ну в примере ниже от других ребят показана возможность на канвасе, без какого либо бэка, попробуйте там сохранить картинку себе на ПК, у вас сохранится картинка с применением данного эффекта
https://codepen.io/chefranov/pen/YOaygr

Answer 1

[Владимир Проскурин]

Через JS такое можно сделать. Нужно высчитать средний цвет картинки (например вот jsfiddle.net/xLF38/818 ) и используя этот цвет, создать градиент по альфа каналу.
UPD: Вот пример

Comments

[hckn]

Никакой градиент не даст такого эффекта. Там обработанные картинки.

Answer 2

[Александр Таратин]

Как делать такие условные заголовки?