36

I'm trying to understand the difference between -webkit-text-fill-color and just simply color? Is there any functional difference? So far as I can tell, they're exactly the same.. Is there something you could do with one but not the other?

android.nick
  • 11,069
  • 23
  • 77
  • 112

2 Answers2

35

From the WebKit blog:

text-fill-color – This property allows you to specify a fill color for text. If it is not set, then the color property will be used to do the fill.

So yes, they are the same, but -webkit-text-fill-color will take precedence over color if the two have different values.

I think the rationale for this is that you can choose a different color if you want when using -webkit-text-stroke, but it will gracefully fall back to color if -webkit-text-stroke isn't available (and thus -webkit-text-fill-color isn't either). There may be cases where you would otherwise end up with unreadable text.

Please note that, as of 2021, -webkit-text-fill-color (and probably other -webkit prefixed properties) are not necessarily exclusive to WebKit-based browsers (i.e. it works in Firefox).

Andrew Marshall
  • 95,083
  • 20
  • 220
  • 214
  • 2
    To add upon your answer: `-webkit-text-fill-color` allows the targeting of only Webkit-based browsers, while `color` can be used to target the rest. – seeming.amusing Feb 15 '12 at 03:46
  • 1
    True, `-webkit-text-fill-color` is specific to Webkit. Furthermore, the color property extends to borders. If you assign a border to an element with a `color` property and not specify the border color, the border will default to the `color` property. – dangerChihuahua007 Feb 15 '12 at 04:09
  • 1
    Of course it's specific to webkit, that wasn't really what was being asked - since eventually `text-fill-color` might be added by all other browsers. I was more so trying to get the rationale of what you would use it for, or how it would benefit someone when it does the same thing as another property. Andrew's rationale seems to make sense. – android.nick Feb 24 '12 at 10:59
  • difference is visible between these two on iOS. Safari tend to set disabled input color to its own predefined color and it will override *color* you define in your CSS. The only way to change it appearance till now is to use *-webkit-text-fill-color* – CodeGems Mar 16 '18 at 03:15
  • An additional difference (at least as of now, I don't know about the situation in 2012) is that color sets the keyword currentcolor. This can then be used elsewhere (see https://developer.mozilla.org/en-US/docs/Web/CSS/color). Also just to note that text-fill-color is apparently not on a standards track though all major browsers do seem to support it, albeit with the -webkit- prefix. – A Haworth Aug 31 '23 at 07:17
27

-webkit-text-fill-color can be set to transparent which allows you to do some really interesting things on text, like setting a horizontal gradient. Check out this rainbow text example: http://jsfiddle.net/DoubleYo/qGfzm/

Micah Winkelspecht
  • 1,805
  • 1
  • 16
  • 7
  • 9
    This still works when you change '-webkit-text-fill-color' to 'color'. – Nick Retallack Mar 06 '13 at 19:00
  • 11
    @NickRetallack It does, but this is a case where you can use it to target Webkit specifically. As only Webkit supports `[-webkit-]background-clip: text`, If you set the `color` to transparent and opened it in a non-Webkit browser, the text would be entirely invisible! This lets you use a fallback `color` for other browsers that will show on top of the gradient, while letting Webkit continue to be pretty. – Meshaal Dec 02 '13 at 16:34
  • 1
    is it possible to apply transition for this property? – vuquanghoang Jan 24 '18 at 08:58