Is that possible to make Words with gradient


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?


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):

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


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

1 Like