Struggling with creating a text gradient effect on my website. Despite following tutorials, Safari seems to have trouble rendering it properly.
Comparison of Chrome and Safari Rendering
https://i.sstatic.net/Q9m8Z.jpg
https://i.sstatic.net/RxAj0.jpg
Encountering issues such as a strange line at the top of the element and blurry text in Safari, which may be related to the -webkit-background-clip: text; property. While I can manage the former, the latter is a major concern.
CSS Style Used:
.title {
font-weight: 700;
font-size: 50px;
line-height: 1em;
text-align: right;
color: #981d97;
display: block;
background-image: -webkit-linear-gradient(left ,#ffa300 0,#e31c79 50%,#981d97 100%);
background-image: linear-gradient(to right,#ffa300 0,#e31c79 50%,#981d97 100%);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
text-fill-color: transparent;
-webkit-font-smoothing: antialiased;
}
Link to my code snippet: https://jsfiddle.net/d3vLd4ft/1/
Recent Updates
- Changed the
line-heightfrom1emto50pxbased on suggestions, but no improvement observed. - Noticed that the font quality slightly improves when resizing the browser window, only to return to being blurry once the resizing stops.