Animated Gradient Text in Wix Studio

Show and tell
, , ,
1

MOTION-GRADIENT-TEXT
MOTION-GRADIENT-TEXT1280×720 135 KB

Hi there, in this tutorial, you will learn how to add an animated gradient text in Wix Studio. Whether you’re building from scratch or just want to spice things up, this effect is simple to apply, super customizable, and adds a ton of visual polish to your design. Let’s jump right in — and as always, if you get stuck or need help, I’ve got you covered.

:television:WATCH IT HERE https://www.youtube.com/watch?v=T-JVE7jBZvI

:link: Helpful Resources:
:open_book: Read the full blog post for more details: https://bit.ly/3UaanD3

:eyes: Preview the tutorial: https://bit.ly/4lgwq65
:hammer_and_wrench: Get more Wix tutorials & tips: https://www.wixideas.com/tutorials

:money_bag: GET A CUSTOM QUOTE: → https://www.wixideas.com/quote
:envelope_with_arrow: NEED HELP? Contact me here → https://www.wixideas.com/contact

:bullseye: Subscribe for More Tutorials!
:backhand_index_pointing_right: Click here to subscribe → http://bit.ly/3a07EEF

:speech_balloon: Got questions? Drop them in the comments! Let’s build something amazing with Wix Ideas! :rocket:

3 Likes
2

:television:WATCH IT HERE https://www.youtube.com/watch?v=T-JVE7jBZvI

2 Likes
3

Nice. Love the effect.

Couldnt find the link to the actual CSS code to copy as mentioned in the tutorial ?

1 Like
4

Here is the CODE:

.TEXTCSS {
–gradient-speed: 8s;
display: inline-block;
background: linear-gradient(120deg, #ff5199, #7873f5, #4ade80, #facc15);
background-size: 300% 300%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: TEXTCSS-gradient var(–gradient-speed) ease-in-out infinite;
}

@keyframes TEXTCSS-gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

2 Likes