css gradient text are not visible on Safari

user_7957409 0
Viewed 283

am facing one issue on gradient css on web and android devices text are visible but on Safari its not showing at all. Please have look on both the screen shots.

I've checked with caniuse.com, and both -webkit-text-fill-color and background-clip: text are said to be supported both in Safari/Desktop as well as Safari/iOS.

.gradient-effect {
  background: linear-gradient(240.86deg, #ff8329 0%, #ff007a 66.41%);
  -webkit-text-fill-color: transparent;
  width: max-content;
  background-clip: text;
  -webkit-background-clip: text;
}

.mine-box-title {
  font-family: Poppins;
  font-style: normal;
  font-weight: bold;
  font-size: 40px;
  line-height: 44px;
  display: flex;
  align-items: center;
  letter-spacing: -0.01em;
}
<h2 class="mine-box-title gradient-effect">25 MILLION</h2>

enter image description here

enter image description here

css html
1 Answers

There is an unresolved, open issue about this on the WebKit Bugzilla since 2017: background-clip:text doesn't work with display:flex. Apple has ignored this bug for 4 years, it will probably never be resolved.

Remove display: flex and it works:

.gradient-effect {
  background: linear-gradient(240.86deg, #ff8329 0%, #ff007a 66.41%);
  -webkit-text-fill-color: transparent;
  width: max-content;
  background-clip: text;
  -webkit-background-clip: text;
}

.mine-box-title {
  font-family: Poppins;
  font-style: normal;
  font-weight: bold;
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.01em;
}
<h2 class="mine-box-title gradient-effect">25 MILLION</h2>

user_37443040
Related