Adding a gradient to the title on the homepage only?

I want only the title on only my homepage to load as a gradient. I am not very familiar with code, so I was looking for CSS code for this and found this website (right above the ‘click me’ button). How do I achieve this?

I am using the Ease theme but without Google Fonts (so that the default system UI font loads). I am running Ghost 4.39.0 and my website is https://nilanjanmustafi.in.

You can add the mentioned custom CSS via Code Injection.

<style>
.cover-description {
	background-image: linear-gradient(red, blue);
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
</style>

This produces

I copy-pasted the code to the site header in code injection and this is what I am seeing.

Update: Just tried opening it in Chrome and Safari on my iPhone and Firefox on my Mac. It loads properly there. But in Chrome as well as Brave on my Mac, it shows the following.

You need to add the fallback as mentioned in article.

.cover-description {
    background-image: linear-gradient(red, blue);
    background-size: 100%;	
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}
1 Like