HTML & CSS linear-gradient text for small words

[ppowell777]

[CODE lang="css" title="linear-gradient"].halloween {
background-image: linear-gradient(to left, black, orange);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
}

.christmas {
background-image: linear-gradient(to left, green, crimson);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
} [/CODE]

Using these CSS classes I want to be able to change the color of words to reflect these classes in their entire gradient. This works for larger words and phrases, but for smaller words, like "Christmas Day" for .christmas, or "Halloween" for .halloween, the change isn't complete, especially since the font is 12px:

[CODE lang="html" title="HTML"]<span id="halloween" class="halloween">Halloween</span><br /><br />
<span id="christmas" class="christmas">Christmas</span> [/CODE]

Does anyone know any other tricks that I would need to do to ensure that the gradient takes place for even smaller words, or is it even possible?

Thanks

 

[LTomy]

Hello ppowell777,

What do you mean the change is not complete? Could it be that the text is simply too small for the effect to be seen?

 

[ppowell777]

The text is too small to see the complete gradient. E.g., "Christmas" should go from crimson to green, but it remains in crimson with a slight change toward red; I want it to go all of the way to green, and I want to be able to have that happen to all words regardless of reasonable length, if at all possible

 

[LTomy]

I see, I do not really understand why it does not work though :/

 

[Tealk]

I do not understand the problem, looks correct?