Gradient text with animation

(Dhiren SHAH) #1


I am able to have the Gradient color effect on Text using CSS, below is the code.

<span style="background: linear-gradient(330deg, #e05252 0%, #99e052 25%, #52e0e0 50%, #9952e0 75%, #e05252 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-position: initial initial; background-repeat: initial initial;">MUSIC 2016</span>

How can I have the animation with changing the colors?
Or may be different method to achieve in Hype.

Thanks in advance.


Just work with the timeline where you need to change inner HTML of your text.

anim (9.8 KB)

(Dhiren SHAH) #3

Thanks Matus for your effort, but this is not what I am looking for. Your example is static, I can’t see any motion.



As far as my readings have led me on this topic animating CSS Gradients is not a “built-in” spec.

However, apparently there are work arounds… just do a search for “CSS Gradient Animation” You will get a lot of hits. Below are two examples:


(Dhiren SHAH) #5

Thanks JimScott, I will explore as you suggested.

(Trey Yancy) #6

Animating between two gradients is cool. Using Hue keyframes works, as a poor man’s workaround.

I created one animation that had a png of a house that was shot around twilight with light glowing in the windows and with exterior lights behind the bushes. I needed to transition between day and night. I created a 1 pixel wide vertical gradient that went from midnight blue to sky blue and through the spectrum to a pink-to yellow sunset hue. I used it to fill an object that was 50% taller than the stage, then moved the object vertically to cycle the sky from afternoon to sunset to night., emphasizing the effect by changing the opacity of cloud layer and raising the opacity of a stars layer As for the house, I used CSS3 to change the hue, contrast, and brightness that darkened the house over time, raised the contrast to bring up the lights, and changed the hue to a cooler, nighttime value. The value of creating a multi-band gradient manually (painting on a wide canvas then trimming it to 1 pixel wide) was that I could have very precise control over the slope of the color curves.

(Max) #7

gradient text