<css-doodle grid="5" class="doodle">
	:doodle {
		@grid: 20 / 100vmax;
		grid-gap: 4vmax;
	}
	
	background: #26C6DA;
	transform: scale(@rand(.1, .9)) translate3d(@r(50px), @r(100px), 0);
	background: hsla(@r(360), 85%, @r(70%, 90%), @r(.9));
	border-radius: @r(10px);
</css-doodle>

<!-- <div class="container">
	Page content.
</div> -->
.doodle {
	position: fixed;
	z-index: -1;
}

.container {
	width: 75%;
	background: #fff;
	margin: 2rem auto;
	padding: 5rem;
	box-shadow: 0 0 50px 0 rgba(0, 0, 0, .2);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.5.1/css-doodle.min.js