CSS text-fill-color Property
The -webkit-text-fill-color property specifies the fill color of the characters in the text.
If this property is not specified, the value of the color property is used.
When used with background-clip: text, -webkit-text-fill-color overrides the color property for the text fill.
INFO
The -webkit-text-fill-color property is primarily used alongside -webkit-background-clip: text to create gradient text effects. Note: Safari supports background-clip: text but does not support the standard text-fill-color property. Use -webkit-text-fill-color for cross-browser compatibility.
DANGER
The text-fill-color property is not fully standardized across all browsers. Do not rely on it for production sites without fallbacks, as it will not work for all users. Implementation details may vary, and behavior could 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
CSS -webkit-text-fill-color values
-webkit-text-fill-color: color | initial | inherit;Example of the text-fill-color property:
text-fill-color another code 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>Result
Example of the text-fill-color property with the "transparent" value:
Example of CSS text-fill-color property
<!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: #8e2b88;
-webkit-text-fill-color: transparent;
background: linear-gradient(to bottom, #ff0052, #8e2b88);
-webkit-background-clip: text;
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:
text-fill-color property with transparent value example
<!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: linear-gradient(to right, rgb(25, 76, 192), rgb(196, 26, 3) 20%, rgb(236, 190, 6) 40%, rgb(25, 76, 192) 60%, rgb(3, 116, 8) 80%, rgb(196, 26, 3));
-webkit-background-clip: text;
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. |
Practice
What can you tell about the CSS property 'text-fill-color' according to the information provided on the page?