Is that possible to make Words with gradient


(Alex) #1

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


(Hans-Gerd Claßen) #2

you’ll need svg-shapes … not fonts …


(Jonathan Deutsch) #3

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!


(Alex) #4

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


(Alex) #5

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