Animated Background

animated-background.markdown

Animated Background

An animated multicolor background using CSS.

A Pen by Jennifer on CodePen.

License.

style.css

* { /* reset margins and paddings on all elements */
	margin:0;
	padding:0;
}

body::before {
		content:""; /* required for ::before */
		position:fixed; /* don't scroll with page */
		z-index:-100; /* place behind elements on page */
		width:100%;
		height:100%;
		background-color:#14C2CC;
		background-image: 
		radial-gradient(circle farthest-side at top right, transparent, #0D64FF), radial-gradient(ellipse farthest-corner at 0% 100%, transparent, #FF00A0);
		animation:bg-change 10s infinite;
}

@keyframes bg-change {
	0%, 100% {
		filter:hue-rotate(0deg);
	}
	50% {
		filter:hue-rotate(-45deg);
	}
}