Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I make a gradient flow in multiple directions?

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.

enter image description here

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:

enter image description here

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

like image 792
Goot Avatar asked Jul 06 '13 17:07

Goot


1 Answers

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);
}

enter image description here

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);
}

Multi-color CSS linear gradient

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>

CSS radial-gradient with mask

like image 171
Temani Afif Avatar answered Nov 14 '22 02:11

Temani Afif