CSS text-fill-color Property

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

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

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

This 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 large 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

<!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>

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 parents element.


Practice Your Knowledge

Which statement is incorrect about CSS text-fill-color property?




Related articles