CSS Floating Background Shapes

When designing websites we always think it’s the small details that have the biggest impact and in todays modern world of web design animation is a great way of grabbing the users attention and adding some additional branding to an otherwise static design.

A subtle animation of elements on your page can have a great impact with visitors in grabbing their attention and adding a little uniqueness to your site.

One way this can be achieved really easily is with some subtle floating background shapes made entirely with CSS.

The CSS

Here is the CSS you’ll need for a collection of 10 floating circles.

/* Animated Circles CSS */

.circles {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.circles li {
	position: absolute;
	display: block;
	list-style: none;
	width: 20px;
	height: 20px;
	background: rgba(96, 183, 199, 0.1);
	animation: animate 25s linear infinite;
	bottom: calc(-150px - 40vh);
}

.circles li:nth-child(1) {
	left: 25%;
	width: 80px;
	height: 80px;
	animation-delay: 0s;
	animation-duration: 20s;
	border-radius: 50%;
	border-top-left-radius: 0 !important;
	background: rgba(47, 44, 92, 0.1);
}

.circles li:nth-child(2) {
	left: 10%;
	width: 20px;
	height: 20px;
	animation-delay: 0s;
	animation-duration: 25s;
	border-radius: 50%;
	border-top-left-radius: 0 !important;
	background: rgba(96, 183, 199, 0.1);
}

.circles li:nth-child(3) {
	left: 70%;
	width: 20px;
	height: 20px;
	animation-delay: 0s;
	animation-duration: 20s;
	border-radius: 50%;
	border-top-left-radius: 0 !important;
	background: rgba(47, 44, 92, 0.1);
}

.circles li:nth-child(4) {
	left: 40%;
	width: 60px;
	height: 60px;
	animation-delay: 0s;
	animation-duration: 15s;
	border-radius: 50%;
	border-top-left-radius: 0 !important;
	background: rgba(114, 63, 145, 0.1);
}

.circles li:nth-child(5) {
	left: 65%;
	width: 20px;
	height: 20px;
	animation-delay: 0s;
	animation-duration: 20s;
	border-radius: 50%;
	border-top-left-radius: 0 !important;
	background: rgba(96, 183, 199, 0.1);
}

.circles li:nth-child(6) {
	left: 75%;
	width: 90px;
	height: 90px;
	animation-delay: 0s;
	animation-duration: 25s;
	border-radius: 50%;
	border-top-left-radius: 0 !important;
	background: rgba(114, 63, 145, 0.1);
}

.circles li:nth-child(7) {
	left: 35%;
	width: 50px;
	height: 50px;
	animation-delay: 0s;
	animation-duration: 30s;
	border-radius: 50%;
	border-top-left-radius: 0 !important;
	background: rgba(47, 44, 92, 0.1);
}

.circles li:nth-child(8) {
	left: 50%;
	width: 25px;
	height: 25px;
	animation-delay: 0s;
	animation-duration: 35s;
	border-radius: 50%;
	border-top-left-radius: 0 !important;
	background: rgba(114, 63, 145, 0.1);
}

.circles li:nth-child(9) {
	left: 20%;
	width: 15px;
	height: 15px;
	animation-delay: 0s;
	animation-duration: 40s;
	border-radius: 50%;
	border-top-left-radius: 0 !important;
	background: rgba(47, 44, 92, 0.1);
}

.circles li:nth-child(10) {
	left: 85%;
	width: 50px;
	height: 50px;
	animation-delay: 0s;
	animation-duration: 45s;
	border-radius: 50%;
	border-top-left-radius: 0 !important;
	background: rgba(96, 183, 199, 0.1);
}

@keyframes animate {
	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 0;
	}
	50% {
		transform: translateY(-60vh) rotate(360deg);
		opacity: 1;
	}
	100% {
		transform: translateY(-120vh) rotate(720deg);
		opacity: 0;
	}
}

You can adjust the CSS to suit your own needs and adjust the shapes, colours, positioning, z-index and a whole lot more. For more complex shapes you can also use clipping paths and there is a great clip-path generator by Bennett Feely that can save you loads of time.

The HTML

To add the shapes to your page all you need to do is simply add this html list:

<ul class='circles'>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>

There are various ways you can add this HTML to your website and you can add them to individual pages as required or use a little bit of jQuery to add them to every page by selecting an element from your page and inserting the new <ul> automatically on page load.

<script>
	jQuery(document).ready(function () {
		jQuery(".container-wrap").append(
			"<ul class='circles'><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>"
		);
	}); 
</script>

Change .container-wrap in the script above to a class of your choice and voila!

Lovely floating shapes.

CSS Floating Background Shapes