Animated rainbow color gradient for the default clock module

[ganget]

I wanted to introduce some more color to my MagicMirror so i made a animated rainbow color gradient which i used to spice up my default clock module. Here is a gif with the result:

The code

.clock-time-only-color {
	background-image: linear-gradient(to left, #ff0000,#ff4000,#ff8000,#ffbf00,#ffff00,#bfff00,#80ff00,#40ff00,#00ff00,#00ff40,#00ff80,#00ffbf,#00ffff,#00bfff,#0080ff,#0040ff,#0000ff,#4000ff,#8000ff,#bf00ff,#ff00ff,#ff00bf,#ff0080,#ff0040,#ff0000);
	-webkit-background-clip:  text;
	-webkit-animation: animate 60s linear infinite;
	background-size: 1000%;
	color: transparent;
	
}
@-webkit-keyframes animate{
	0%	{background-position: 0% 500%;}
	100%	{background-position: 500% 1000%;}

If somebody has any idea of improving the image quality for the animation i’m really interested!