Text Gradient

[clefler]

Was wondering what the best way is to make a gradient inside of text?
Support forum topics are pretty old.

[prakash_s]

Hello @clefler,

Thanks for writing to us.

Text gradient can be achieved by using custom CSS. For that, you need to learn CSS and learn how to use the browser’s element inspector or you can contact to a developer who can assist you with your concern.

Please note that we don’t provide custom code and custom development support. It is out of the support scope.

In case if you have an idea about CSS coding please have a look at these article for your reference.

CSS Gradient Text — CSS Gradient

Gradient Text | CSS-Tricks

Hope it helps
Thanks for understanding

[clefler]

Thanks, I am familiar with doing this for the background of a section. So do I use the class of the text element, like if it is a headline what is the class?

[tristup]

Hi @clefler,

The sample code provided by my colleague in the previous post was shown how you can write the custom CSS code to implement the gradient color and implement the specific class into the element or selector. Here I am providing the specific custom CSS code along with the class i.e text, which can be used.

.text 
{
    text-transform: uppercase;
    background: linear-gradient(to right, #30CFD0 0%, #330867 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 20vw;
    font-family: "Poppins", sans-serif;
}

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something in your site nor will we enhance it.

Thanks

[clefler]

perfect thank you
I didn’t realize the codepen window was interactive!

[ruenel]

You are most welcome.