CSS Text GRADIENT

Support
#1

Hey Guy, your are my last hope :slight_smile: i search the whole web i think XD

actually i try to display a css text gradient on a headline element and it works fine on all browsers but not on safari. Do you have a trick?

I am using this code:
$el .x-text-content {
background: -moz-linear-gradient(90deg, rgba(42,63,76,1) 38%, rgba(87,132,159,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(42,63,76,1) 38%, rgba(87,132,159,1) 100%);
background: linear-gradient(90deg, rgba(42,63,76,1) 38%, rgba(87,132,159,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Best Regards Roland

#2

Hi Roland,

This seems to be a bug in Safari. Try updating your code to:

$el .x-text-content {
    background: -moz-linear-gradient(90deg, rgba(42,63,76,1) 38%, rgba(87,132,159,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(42,63,76,1) 38%, rgba(87,132,159,1) 100%);
    background: linear-gradient(90deg, rgba(42,63,76,1) 38%, rgba(87,132,159,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-mask-image: linear-gradient(90deg, rgba(42,63,76,1) 38%, rgba(87,132,159,1) 100%);

Let us know how it goes.

#3

Hey thanks for your answer, still didnt work. i try this too background-image: url(‘https://www.tiemeyerrent.de/wp-content/uploads/2019/11/Verlauf.png’); but it still not working.

Is there a solution that if someone visit the url with safari as browser that this element would hide with the gradient and a the same element would be there without the gradient that safari can render. just a black text…

Best Regard Roland
ps. you guy rock all an thanks a lot every time for your help!!!

#4

Hi @rolandhentschel,

Safari doesn’t play well when it comes to the transparency of images or backgrounds. Would you mind providing the URL that has this issue for further checking? And please provide the password of the Under-construction view :slight_smile:

Thanks!

#5

Hi @rolandhentschel,

Thank you for the credentials but what is your login page URL? wp-admin and wp-login.php returns 503 Service Unavailable error (see screenshot below).

Thanks,

#6

Hey thats normal i forgot it. Its because you try to login to the site not from germany. Need to ask the hoster. If u have a free vpn rdy. You could try to use a german ip. In that time i will try to resolve tha geoblocking for the login to wordpress.

Thank You

#7

Hello @rolandhentschel,

Please update your code using this:

$el .x-text-content {
  background-image: -moz-linear-gradient(90deg, rgba(42,63,76,1) 38%, rgba(87,132,159,1) 100%);
  background-image: -webkit-linear-gradient(90deg, rgba(42,63,76,1) 38%, rgba(87,132,159,1) 100%);
  background-image: linear-gradient(90deg, rgba(42,63,76,1) 38%, rgba(87,132,159,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

If this does not work, may I recommend that you use CSS Gradient generator to make sure that you have the correct code:

For CSS Gradient Background color reference, please check this out:

Hope this helps.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.