Animated Colorful Gradient Background with CSS

With CSS, you can do many things to add color to your pages. It is also possible to make the transition between the colors of the background in motion with CSS. You can also specify factors that affect the movement and image such as angle, which colors will transition and speed.

In the example below, the gradient is given to the body tag. A background with four different colors and a 45 degree angle is assigned. Then the gradient is animated with 3 different keyframes, 0%, 50% and 100%.

body {
	margin: 0;
	width: 100%;
	height: 100vh;
	background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 500% 500%;
	animation: animeBG 15s ease infinite;
	animation-direction: alternate;
}

@keyframes animeBG {
    0% {background-position: 0%}
    100% {background-position: 100%}
}

Then you need to call the style.css file with the link tag on the index.html page.

There are also online services that make it easy to create gradient effects with CSS. One of them is gradient-animator. On this page, for your convenience, they have created a project where you can easily obtain gradient codes. You can animate your page by combining any kind of gradient colors you want.

Popular Tutorials

Create Custom ScrollBar in CSS

In this HTML and CSS tutorial, I will show you how to…

5 Awesome VS Code Plugins Useful in HTML

I have been using VS Code for a while now and I…

How to Create Animated Image Carousel with CSS

In this tutorial, I’ll show you how to create animated image carousel,…

Animated Colorful Gradient Background with CSS

With CSS, you can do many things to add color to your…

Smooth Scrolling Compatible with All Browsers

On long web pages, I’ll show you how to add Smooth Scrolling…

Animated SVG Icons | SVG Stroke Animation jQuery

How to use animated SVG on your website? How about animating eye-catching…