How can I make the gradient flow in several directions?

Question

I would like to create an ambilight effect using gradients.

In css3, you can let the gradient go from top to bottom , bottom to top , left to right or from right to left , and you can use several colors. but only for one direction.

I want to combine 4 areas of the image, by calculating the average or dominant color for each area, and then create a background for the image using gradients.

I thought about using multidimensional gradients, but when creating an ac gradient and another bd, it would look nice and just put both behind the picture. (I noted a critical area.).

Do you have an idea how to do this?

EDIT . I do not want to mix colors between gradients, as in the picture. I am pleased with the smooth float between all the colors.

EDIT2: I uploaded a demonstration of my problem here: http://jsfiddle.net/HJtnG/

Edit3:, we learned that this is not possible with CSS3, but perhaps with SVG. After some re-search, I found this image:

So, I will go with a colored circle, as in the picture.

Answer 1

You tried colorzilla for free, and you can do a lot with it. hope this can help.

Answer 2

Forgive me if I do not understand the question, but I believe that you want a rectangular gradient. And, unfortunately, SVG does not support this. The closest thing you could get is to have some linear gradients with some alpha fading, and behind it is another linear fading gradient.