Gradient is invisible on Apple smartphones

[cdelagarza]

Hi team,

we noticed that the gradient in the headlines is completely invisible on Apple smartphones. Attached is the code and a screenshot. Do you have any idea what the problem is? Fun fact: if you take a screenshot on the Apple smartphone, you can see the gradient on the screenshot. Vampire effect haha

Über mich - christopherdelagarza.de

.color {
background: -webkit-linear-gradient(45deg, #45d2d4, #0c3cd2, #040424);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

[ruenel]

Hello @cdelagarza,

Thanks for writing in! Your CSS code may be incorrect. Please make sure that the code will work across all modern browsers. Kind use CSS Linear Background color generator instead: https://cssgradient.io/

Hope this helps.

[cdelagarza]

Thanks for the good hint.
When I use the linear code from the website:

Summary

.color {
background: rgb(2,0,36);
background: -moz-linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 10%, rgba(0,212,255,1) 50%);
background: -webkit-linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 10%, rgba(0,212,255,1) 50%);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 10%, rgba(0,212,255,1) 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#00d4ff",GradientType=1);
}

This happens (only the background):

When I use this code, it works apperently, but users keep reporting me: they can’t see the text.

Summary

.color {
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 10%, rgba(0,212,255,1) 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

}

Between the image and the first text, there should a headline but it is invisible.

[ruenel]

Hello @cdelagarza,

You may need to check out the following articles:

• https://www.tommygeorge.com/blog/css-how-to-apple-iphone-xr-masked-text/
• https://www.programmersought.com/article/31205881671/

Or you may also use a different approach:

• https://css-tricks.com/how-to-do-knockout-text/

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third-party developer.

Thank you for your understanding.