Changing heading colour to a gradient in origin theme

Store Design
,
1

Hi all,

I am using Origin theme to build my first store. I would like to change the colour of some of my headers to a gradient ( to left #ffed59 to #ff1313) though I only would like to change some of the text. For example, my header would say “feel better with faedo” and I would like the first three words to be black and the last to be a gradient. Is this possible?

thanks for the help!

2

Hi @Bomotomo

This is Mike from Omega

Firstly, you have to add this HTML code with your text


feel better with faedo

Then add this CSS code to custom gradient for text ‘faedo’

.custom-gradient-text {
        background: linear-gradient(45deg, #30CFD0, #330867);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

You can change the direction by change the text ‘45deg’, negative number is acceptable

Hope my answer will help you

Mike from Omega

3

Thank you so much for your reply,

where exactly do I ad the HTML and where do I add the CSS?

4

@Bomotomo

Please share your site URL,
I will check out the issue and provide you a solution here.

5

@Bomotomo

The HTML code, you will add to the place you want to show the text “feel better with faedo” , maybe header

and the CSS code you can add by following steps:

  1. Open Theme → Edit code

  2. Open Assets / base.css and paste the CSS code to the bottom of file