Gradient Text Problem

I Need Help
1

Hi …
has anybody the same problem ? Or I doing something wrong …
Gradient text work fine on Safari und Firefox …But not on Windows IE11 ?!
Thanks for your help
tom

2

This is a common problem with IE generally. It’s usually overcome by adding a filter/browser extension so that IE knows how to handle them. There are different filters for various versions of IE. Internet Explorer is likely to be the only browser where you will get this issue - most of the others support gradient rendering without problems.

3

Thank you for your answer … mhm :thinking: I think a lot of people use IE … And the Problem is in IE its not only the text in (for Example) Grey… On IE I see a gradient field without Text.
Is there a way that It works with all browsers ? With code or something else ?
Any ideas ?
Tom :blush:

4

Is there a way to to gradient Text for IE11 with some code ? In that wonderful forum are some good people they know about a lot of coding … @Pealco and @webplus @Jakerlund and all the other people … any ideas for me ? Thanks a lot for your help Tom

5

Hello @tom2

If you want a gradient text for a big heading you could use a svg image (or png) instead.
Much easier and will look great in all browsers.

Cheers :nerd_face:

6

Hi,

thanks for your answer. I have done this before. But the Problem is that is not only one heading …I think 21 headings and a few words. And so the heading have a different size …

With only one heading it works fine
do you know something about the (at)support rules ?! Is this a way to do this. That in Browsers like Safari I see a gradient thing and in IE I see only a grey text …Is this possible ?
Thanks a lot
tom

7

Hello @tom2 try the following:

Add the text that you want, then in classes of that text add one like “gradienttext” and don’t change anything in that class,
Then in the preferences of the page add the folowing code:

<style>
.gradienttext {
	text-transform: uppercase;
	background: linear-gradient(to right, #30CFD0 0%, #330867 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font: {
		size: 20vw;
		family: $font;
	};
}
</style>

Try if it works for you please…

8

Hi @Pealco
thanks for your help. With Safari / Firefox it work. But with IE it look like this ( see screenshot )

16
Bildschirmfoto 2019-08-20 um 11.07.16.png778×86 26.7 KB

The text is dark and the gradient is in the background
again, thanks for your help

tom