Rainbow text

by AltayH

HTML

<span>Rainbow text</span>

CSS

span {
	background: linear-gradient(to right, #d22 0%, #d2d 15%, #22d 30%, #2dd 45%, #2d2 60%, #2d2 75%, #dd2 90%, #d22 100%);
	background-size: 200% 200%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: animatedBackground 3s linear infinite;
}

@keyframes animatedBackground {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 200% 0;
	}
}