I recently needed a seamless abstract background for a client project. I searched high and low to find something for my needs. I came across a CSS3 background site that gave me some inspiration. After some tinkering I became an expert in CSS3 background-image gradients so I will share with you my abstract CSS3 gradient background on codepen.
I hope this helps someone with their project because it saved me a ton of bandwidth and an HTTP call:)
Here is the CSS3
.abstract { background-color: #8ac8d5; background-image: radial-gradient(rgba(76,139,152,1), rgba(138,201,214,.05) 200px, transparent 400px), radial-gradient(rgba(76,139,152,1), rgba(255,255,255,.1) 300px, transparent 400px), radial-gradient(rgba(76,139,152,1), rgba(138,201,214,.1) 400px, transparent 400px); background-size: 1000px 500px, 700px 500px, 700px 500px; background-position: 0 -200px, 300px -100px, 700px -200px; height: 500px; }
And the HTML
<div class="abstract"></div>