CSS text-fill-color Property

The text-fill-color property specifies the fill color of characters of the text.

If this property is not specified, the value of the color property is used.

The text-fill-color and the color properties are the same, but the text-fill-color takes precedence over the color if the two have different values.

The text-fill-color property is used with -webkit- extension.

The text-fill-color property has not been standardized yet. Do not use it on making sites meeting the Web: it will not work for all users. There may also be significant variances between implementations, and the performance may change in the future.

Initial Value	currentColor
Applies to	All elements.
Inherited	Yes.
Animatable	Yes. The color is animatable.
Version	Compatibility Standard
DOM Syntax	object.style.textFillColor = "#1c87c9";

Syntax

text-fill-color: color | initial | inherit;

Example of the text-fill-color property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        margin: 0;
        font-size: 1.5em;
        -webkit-text-fill-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-fill-color property example</h2>
    <p>Lorem Ipsum is simply dummy text...</p>
  </body>
</html>

Try it Yourself »

Result

Example of the text-fill-color property with the "transparent" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      article {
        padding: 10px;
        margin: 15px auto;
        font-size: 18px;
      }
      p {
        color: #444;
        line-height: 1.6;
        margin: 20px 0;
        background: #E7E7E2;
      }
      q {
        display: block;
        margin: 25px 0;
        text-transform: uppercase;
        text-align: center;
        font-family: sans-serif;
        font-size: 30px;
        color: #ff0052;
        color: #8e2b88;
        -webkit-text-fill-color: transparent;
        background: -webkit-gradient(linear, left top, left bottom, from(#ff0052), to(#8e2b88));
        background: -o-gradient(linear, left top, left bottom, from(#ff0052), to(#8e2b88));
        -webkit-background-clip: text;
      }
      q:before {
        content: '';
      }
    </style>
  </head>
  <body>
    <article>
      <p>
        Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
      </p>
      <q>
        The text-fill-color property is used with -webkit- extension.
      </q>
      <p>
        There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
      </p>
    </article>
  </body>
</html>

Try it Yourself »

Example of using the text-fill-color property to set a horizontal gradient:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        display: inline-block;
        font-family: sans-serif;
        font-weight: bold;
        font-size: 40pt;
        background: -webkit-gradient(linear, left top, right top, 
        from(rgb(25, 76, 192)), color-stop(20%, rgb(196, 26, 3)), 
        color-stop(40%, rgb(236, 190, 6)), 
        color-stop(60%, rgb(25, 76, 192)), 
        color-stop(80%, rgb(3, 116, 8)), 
        to(rgb(196, 26, 3)));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    </style>
  </head>
  <body>
    <h1>Cascading Style Sheets (CSS)</h1>
  </body>
</html>

Try it Yourself »

Values

Value	Description
color	Specifies foreground fill color of the element's text content. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used.
initial	Makes the property use its default value.
inherit	Inherits the property from its parent element.