My attempt at creating a text gradient in WordPress (utilizing SiteOrigin pagebuilder) is not successful in Edge or Safari; the text appears colorless in both browsers.
I have experimented with the following recommendations: CSS3 Text Gradients not working? Gradient not working in Safari
Unfortunately, these solutions only resulted in a linear background gradient rather than a text gradient.
Below is the code I am currently using:
<style>
.flip-up {
/*background: linear-gradient(90deg, #97b3e1ff, #c5c95df0);*/
background-image: linear-gradient(90deg, #97b3e1ff, #c5c95df0);
-o-background-clip: text;
-ms-background-clip: text;
-moz-background-clip: text;
-webkit-background-clip: text;
-o-text-fill-color: transparent;
-ms-text-fill-color: transparent;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
}
</style>
The functionality of the text animations has been independently tested (via the Scroll Triggered Animations plugin); they operate correctly in all major browsers, ruling out that as the issue. My website can be accessed at (issues are observed in headers like "Affordable and Effective"). Any assistance would be greatly welcomed!
Moreover, if achieving this seems unattainable, is there a method to display solid-color text solely in Edge and Safari, while maintaining a gradient effect in other browsers?