Is that possible to make Words with gradient

Hello,

Here is a example of what I want:

but in Hype, I found there is gradient option of other element, but did not found same option in Fonts.

is it possible to set the fonts like what that example?

Thanks

you’ll need svg-shapes … not fonts …

I found this tip; it only works on Safari and Chrome. You can add a class name like mygradienttext and then have this CSS in your head html (adjusting the linear gradient to what you want):

<style>
.mygradienttext {
	background: linear-gradient(#eee, #333) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}	
</style>

GradientText.hype.zip (28.0 KB)

Or go with an old-fashioned image file!

1 Like

Hi @h_classen and @jonathan,

Great thanks.

Both works for me, and unfortunately the CSS way does not work for Firefox, so finally I do it by SVG, and glad to share your ideas:)


Or access this page:

https://www.lovcour.com/elastic_mechanizm/elastic_feature

2 Likes

I just found there is another piece of code for gradient in Firefox:

1 Like