We put it in the markup:

<img src="images/marilyn.png" alt="">

And we color it:

img { background: red; }

Then we make an animation to cycle through some colors. Two syntaxes for this now (grunt):

@-webkit-keyframes super-rainbow {
//AN_Xml:    0%   { background: red; }
//AN_Xml:    20%  { background: orange; }
//AN_Xml:    40%  { background: yellow; }
//AN_Xml:    60%  { background: green; }
//AN_Xml:    80%  { background: blue; }
//AN_Xml:    100% { background: violet; }
//AN_Xml:}
//AN_Xml:
//AN_Xml:@-moz-keyframes super-rainbow {
//AN_Xml:    0%   { background: red; }
//AN_Xml:    20%  { background: orange; }
//AN_Xml:    40%  { background: yellow; }
//AN_Xml:    60%  { background: green; }
//AN_Xml:    80%  { background: blue; }
//AN_Xml:    100% { background: violet; }
//AN_Xml:}

Then we apply that animation to the image:

img {
//AN_Xml:     background: red;
//AN_Xml:     -webkit-animation: super-rainbow 15s infinite alternate linear;
//AN_Xml:     -moz-animation: super-rainbow 15s infinite alternate linear;
//AN_Xml:}

That'll do 'er. Check out the demo for this example and other quick fun one of rainbow gradient on a bicycle shape that moves on hover.

View Demo   Download Files

Images snagged off of Vecteezy.

Advertise here with BSA