В css3 вы можете позволить градиенту перемещаться сверху вниз, снизу вверх, слева направо или справа налево, а также использовать несколько цветов. но только для одного направления.
Я хочу объединить 4 области изображения, рассчитав средний или доминирующий цвет для каждой области, а затем создать фон для изображения с помощью градиентов.

Я думал об использовании нескольких градиентов, но при создании градиента это выглядело бы не очень хорошо ac и еще один bd и просто поместите оба позади изображения. (Я отметил критическую область.).
Есть ли у вас идеи, как это можно сделать?
РЕДАКТИРОВАТЬ: я не хочу смешивать цвета между градиентами, как на картинке. Меня устраивает плавное плавное перемещение между всеми цветами.
EDIT2: Я загрузил демо-версию своей проблемы здесь: http://jsfiddle.net/HJtnG/
Edit3: мы узнали, что этого невозможно достичь с помощью CSS3, но, возможно, с SVG. После некоторых исследований я нашел эту картинку:

Поэтому я возьму цветной круг, как на картинке.
Подробнее здесь: https://stackoverflow.com/questions/175 ... directions
Мобильная версия