Text Stroke
Outline text so it stays legible on a shaded background. Set the stroke width and color with the text stroke utilities.
Basic Usage
Apply text-stroke to outline text. Combine with width and shade modifiers as needed.
| Class | Description |
|---|---|
text-stroke
|
Stroke: outline (default 3.5px, default contrast ink) |
text-stroke--{size}
|
Stroke width: small, medium, large, xlarge |
text-stroke--{shade}
|
Stroke color: any palette token, from black and white to gray-75 and red-40. See
Background
Background
Apply color tokens as backgrounds with bg--{token}
Use the color palette defined in Colors. Apply these shades with bg--{token} for backgrounds. On 1-bit displays, grayscale uses dither patterns; on 2-bit and 4-bit+, solid colors render.
for the shade scale. |
<span class="text-stroke">Outlined text</span>Widths
Preset size modifiers set the stroke width on text. The default stroke is 3.5px in the default contrast ink, with additional options for base (3.5px, equivalent to default), small (2px), medium (4.5px), large (6px), and extra large (7.5px). The text-stroke--base modifier explicitly sets the default stroke width and is useful for responsive layouts.
Text Stroke
Preset Sizes
<span class="value value--large">Aa</span>
<span class="value value--large text-stroke text-stroke--small">Aa</span>
<span class="value value--large text-stroke text-stroke--base">Aa</span>
<span class="value value--large text-stroke">Aa</span>
<span class="value value--large text-stroke text-stroke--medium">Aa</span>
<span class="value value--large text-stroke text-stroke--large">Aa</span>
<span class="value value--large text-stroke text-stroke--xlarge">Aa</span>Shades
Leave the shade off to stroke with the default contrast ink, which resolves through the theme chain and flips with dark mode. Use the text-stroke--{shade} modifier to pin a color instead. The shades are the same palette tokens the background scale uses:
text-stroke--blackandtext-stroke--white.text-stroke--gray-10throughtext-stroke--gray-75, in steps of five, plus the legacygray-1togray-7aliases.- Ten hues (red, orange, yellow, lime, green, cyan, blue, violet, purple, pink) as a bare name such as
text-stroke--redand on the same 10 to 75 steps, sotext-stroke--red-40works on a color panel.
For the shade scale and how it adapts across bit depths, see Background Background Apply color tokens as backgrounds with bg--{token} Use the color palette defined in Colors. Apply these shades with bg--{token} for backgrounds. On 1-bit displays, grayscale uses dither patterns; on 2-bit and 4-bit+, solid colors render. .
A shade modifier and a width modifier combine: text-stroke text-stroke--black text-stroke--small is a 2px black outline. Both take the bit-depth prefixes, so 2bit:text-stroke--gray-30 restyles the outline on 2-bit screens only.
A bare shade class draws nothing: it sets the color and leaves the drawing to text-stroke or a width modifier.
Image Stroke
Image Stroke
Legible images when displayed on shaded backgrounds
Outline a vector or transparent raster image so it stays legible on a shaded background. Set the stroke width and color with the image stroke utilities.
differs here, where a lone shade class draws the default ring.
Text Stroke
Shades
<span class="value value--large text--white">Aa</span>
<span class="value value--large text--white text-stroke text-stroke--small text-stroke--black">Aa</span>
<span class="value value--large text--white text-stroke text-stroke--black">Aa</span>
<span class="value value--large text--white text-stroke text-stroke--medium text-stroke--black">Aa</span>
<span class="value value--large text--white text-stroke text-stroke--large text-stroke--black">Aa</span>
<span class="value value--large text--white text-stroke text-stroke--xlarge text-stroke--black">Aa</span>How It Renders
The stroke draws as concentric drop-shadow rings, not as native -webkit-text-stroke. The ring sits behind the glyph in every browser, so text of any shade takes a stroke.
That includes grayscale text, which the framework paints as a bitmap pattern revealed with background-clip: text. Native strokes overpaint a clipped fill; rings do not, so text--gray-40 text-stroke keeps both the pattern and the outline.
Before 3.2 the stroke was a native outline and worked only on pure black or white text. Screens pinned to 3.0 or 3.1 still render that way.