Скрипт помещает изображение в canvas 2 на 2 пикселя и получает цвета верхнего левого и нижнего правого угла и усредняет их.
Одно из самых быстрых решений. Я пробовал использовать изображение 1 на 1 пиксель, но это часто не работает. А если брать только верхний угол и не усреднять, фон получается слишком яркий, так как на многих фотографиях сверху - небо.
Выше по клику будет фон с градиентом, ниже - БЕЗ градиента (усредненный):
Фон с градиентом всем хорош, но к нему нельзя применить анимациии перехода через transition. Только через прозрачность.
Для примера в скрипте стоит прозрачность 0.9 в rgba. Да, можно было перевести в hex цвета, можно было использовать rgb (для старых браузеров). Но я не стал. Так будет симпатичнее.