Living Background Generator

The Gradient Background Generator is a tool that allows developers to select the colour of their choice along with the type of gradient of their choice. The tool then outputs the style code for the user customized background in the output window. This tool allows the user to create the animated background visually allowing the user to visualize it better than the oldie way.

COLOR PALETTE
Choose color from the box

ANGLE 270°
DURATION 7s


	.animated-background {
		background-image: linear-gradient(270deg, #000000,#bb2d6f,#fd9d1d,#fcf437);
		background-size: 400% 400%;
		animation: gradient 7s ease infinite;
	}

	@keyframes gradient {
		0% {
			background-position: 0% 50%;
		}
		50% {
			background-position: 100% 50%;
		}
		100% {
			background-position: 0% 50%;
		}
	}

Copy