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>

Result

text-fill-color with transparent value

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>

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>

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.

Browser support

chrome edge firefox safari opera
1.0+ 12.0+ 49.0+ v 15.0+

Practice Your Knowledge

What can you tell about the CSS property 'text-fill-color' according to the information provided on the page?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?