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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With