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
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
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?
Correct!
Incorrect!
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.