Is there a difference between using `-webkit-text-fill-color: transparent` and `color: transparent`?

Question

The behavior looks to be the same.

body {
  text-align: center;
}

p {
  font-size: 2.5em;
  background-image: linear-gradient(to bottom, #ff0052, #8e2b88);
  -webkit-background-clip: text;
}

p.-webkit {
  -webkit-text-fill-color: transparent;
}

p.color {
  color: transparent;
}

<p class="-webkit">-webkit-text-fill-color: transparent</p>
<p class="color">color: transparent</p>

(Or see Codepen)

Browser support of -webkit-background-clip: text is weaker than of -webkit-text-fill-color: transparent, so most probably we don't win better browser support, but does it change anything (like more/less optimal rendering)?

https://stackoverflow.com/questions/9287552/difference-between-webkit-text-fill-color-and-color ? — john c. j., Jul 27 '18 at 10:33

score 0 · Answer 1 · answered Jul 27 '18 at 10:34

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color

Is there a difference between using `-webkit-text-fill-color: transparent` and `color: transparent`?

1 Answers1