A new codepen.io snippet to create an abstract CSS3 background

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>

Leave a Reply