text-fill-color
Control glyph fill independently of the foreground color.
Overview
| Class | Declarations |
|---|---|
text-fill-color:currentColor | -webkit-text-fill-color: currentColor;
|
text-fill-color:transparent | -webkit-text-fill-color: transparent;
|
text-fill-color:<color> | -webkit-text-fill-color: <color>;
|
Examples
Fill text with a color
text-fill-color-blue-50 sets -webkit-text-fill-color. Compare the same foreground color with its ordinary fill and a separately specified blue fill.
<!-- Fill follows foreground --><p id="target" class="inline-block max-w:100% m:0 font-4xl font-semibold leading:1.5 fg-violet-50 text-fill-color-current"> Clear type</p><!-- Independent blue fill --><p id="target" class="inline-block max-w:100% m:0 font-4xl font-semibold leading:1.5 fg-violet-50 text-fill-color-blue-50"> Clear type</p>Generated CSS
@layer theme { :root, :host { --color-blue-50: oklch(58.22% .2279 263.9) }}@layer utilities { .text-fill-color-blue-50 { -webkit-text-fill-color: var(--color-blue-50) }}This WebKit-prefixed property is implemented by multiple browser engines. It controls glyph fill independently of color; check support in the browsers you target.
Make text fill transparent
Transparent fill reveals this real background gradient clipped to the glyphs. The example supplies both the image and text clipping; transparent fill by itself would hide the text.
<!-- Gradient clipped to glyphs --><p id="target" class="inline-block max-w:100% m:0 font-4xl font-semibold leading:1.5 bg-clip-text text-fill-color-current background-image:linear-gradient(90deg,var(--color-blue-50),var(--color-violet-50))@supports((background-clip:text))@screen text-fill-color-current@print text-fill-color:transparent@supports((background-clip:text))@screen"> Clear type</p>The gradient and transparent fill apply only on screen when the browser supports text clipping. The base fill stays solid otherwise. Open print preview to see the readable solid-color version without the background image.
Use the current color
text-fill-color-current follows the element’s foreground. This child resets an inherited blue fill while the surrounding text keeps it.
<!-- Inherited blue fill · local foreground reset --><div class="font-2xl leading-xl fg-violet-50 text-fill-color-blue-50"> Parent <span id="target" class="text-fill-color-current">and child</span></div>color alone does not override an explicitly inherited text fill. Reset the fill as well when it should follow the new foreground.
Apply conditionally
Hover or focus to change the glyph fill independently of the button’s foreground. Print restores currentColor, preserving a solid label.
<!-- Pointer and keyboard states --><button id="target" type="button" class="font-2xl leading-xl text-fill-color-current text-fill-color-current@print text-fill-color-blue-50:hover@screen text-fill-color-blue-50:focus-visible@screen"> Clear type</button>