Changing Colour Gradient Text Effect

What does this code do?

This code snippet will allow you to add a changing colour gradient to text.

Create your CSS Gradient

First, decide on how you would like your gradient to look. Go to https://www.gradient-animator.com/ and design the gradient code you would like.

Save the code provided by the generator.

Code Snippets

Custom CSS

Paste the code from the generator into Design > Custom CSS.

Change the code “.css-selector” to a class name of your choice. Then add in the two lines of code, I did below.

.CLASSNAME {
    background: linear-gradient(270deg, #19f4bc, #4a19f4);
    background-size: 400% 400%;
    -webkit-background-clip: text; /*ADD THIS */
    -webkit-text-fill-color: transparent; /* ADD THIS */

    -webkit-animation: AnimationName 3s ease infinite;
    -moz-animation: AnimationName 3s ease infinite;
    animation: AnimationName 3s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

Code Block

Copy and paste the appropriate code into a code block on your website where you would like the text to be.

<!--The Whole Sentence -->
<h1 class ="CLASSNAME">This is some colourful text.</h1>

<!--Part of the Sentence -->
<h1>This is some <span class ="CLASSNAME">colourful</span> text.</h1>

Then replace CLASSNAME with the classname you chose in your Custom CSS.

How To Use It

1. Use https://www.gradient-animator.com/ to create the colour gradient you would like.

2. Copy and paste the code snippets as indicated above and make the described changes.

3. Change h1 to target the type of text you want.

   • h1 = Heading 1

   • h2 = Heading 2

   • h3 = Heading 3

   • h4 = Heading 4

   • p = Body Text (all paragraphs; there is no p1, p2, p3 etc.)

   • a = Link

4. Make sure you use the same classname in your code block as you do your CSS (minus the “ . “)