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
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
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
Gradients don’t support transitions yet (although the current spec says they should support like gradient to like gradient transitions via interpolation.). If you want a fade-in effect with a background gradient, you have to set an opacity on a container element and ‘transition` the opacity. (There have been some browser releases that supported transitions on … Read more