To start with, your gradient can be simplified like below. .box{ background: radial-gradient( farthest-side at bottom left, rgba(218, 218, 216, 0.5), transparent), radial-gradient( farthest-corner at bottom right, rgba(253, 253, 253, 0.5), transparent 300px); height:200px; } body { background:blue; } <div class=”box”> </div> Now the issue is that safari don’t support the syntax used with at … Read more
This is by far the most hassle free and best way to implement this. It is purely CSS and very very simple to do, no extra files – nothing. Ok, it’s not the best way possible, but it works very well, very reliable (never failed when testing across very old browsers) and very fast to … Read more
mask combined with linear-gradient can do it: .box { height: 200px; width: 300px; background: linear-gradient(to right, rgb(238, 252, 83), rgb(120, 239, 197)) } .box::before { content: “”; display: block; height: 100%; background: linear-gradient(to right, rgb(253, 67, 205), rgb(74, 68, 215)); -webkit-mask: linear-gradient(to bottom,#0000, #000); mask: linear-gradient(to bottom,#0000, #000); } <div class=”box”></div> Another kind of coloration: … Read more
2021: It is now possible to animate gradients (NOT Firefox or Safari yet) With Chrome 85, Edge, and Opera adding support for @property rule, now we can do this in CSS: @property –myColor1 { syntax: ‘<color>’; initial-value: magenta; inherits: false; } @property –myColor2 { syntax: ‘<color>’; initial-value: green; inherits: false; } The rest is regular … Read more