Creating an effect like this is definitely possible using CSS3 but you would need more than just the border for that. In the below sample, I have used a pseudo-element with a radial-gradient background to mimick the border effect shown in question. Depending on which side should have the border, you can tweak the positioning … Read more
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
html, body { margin: 0; height: 100%; }
You can do the gradient differently and animate the position. The trick is to double the size of the gradient and make the value of color stop half of their actual values so you keep the same visual gradient then you can animate it from left to right. It won’t look exactly the same as … Read more