How can I make a gradient flow in multiple directions?

Question

I'd like to create an ambilight effect by using gradients.

In css3 you can let a gradient move from top to bottom, bottom to top, left to right or from right to left and you can use multiple colors. but only for one direction.

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

I thought about using multible gradients but it would not look good when you create an gradient ac and another one bd and just place both behind the picture. (I marked the critical area.).

Do you have any Idea how this could be done?

EDIT: I don't want to mix the colors between the gradients, like in the picture. I'm satisfied with a smooth float between all colors.

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

Edit3: we've learned this can't be accomplished with CSS3 but maybe with SVG. After some reaearching I've found this picture:

So I'll go with a colored circle like the one on the picture.

Answer 1

In 2020, you have more possibilities to achieve what you want considering new gradients and mask.

using conic-gradient()

html {
  min-height:100%;
  background:conic-gradient(from 45deg,red,blue,green,yellow,red);
}

Using linear-gradient and mask:

html {
  min-height:100%;
  background:linear-gradient(to right,red,blue);
}
html::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(to right,green,gold);
  -webkit-mask:linear-gradient(#fff,transparent);
          mask:linear-gradient(#fff,transparent);
}

Using radial-gradient with mask

html {
  background:radial-gradient(120% 120%,red 30%,#000);
}
html:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:radial-gradient(120% 120%,blue 30%,#000);
  -webkit-mask:linear-gradient(transparent,#fff);
          mask:linear-gradient(transparent,#fff);
}
.full {
  height:100vh;
  position:relative;
  background:radial-gradient(120% 120%,green 30%,#000);
  -webkit-mask:linear-gradient(to right, transparent,#fff);
          mask:linear-gradient(to right, transparent,#fff);
}
.full:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:radial-gradient(120% 120%,gold 30%,#000);
  -webkit-mask:linear-gradient(transparent,#fff);
          mask:linear-gradient(transparent,#fff);
}
body {
  margin:0;
}

<div class="full"></div>

Answer 2

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

Answer 3

Have you tried colorzilla its free and you can do a lot of stuff with it. hope this can help.