Animated rainbow color gradient for the default clock module



  • 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:
    0_1549222544023_Animated rainbow color gradient.gif
    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!