What does -webkit-text-stroke actually do?

It draws an outline of a given width and color around each glyph's outer edge, independent of the text's fill color set separately — combined with color: transparent it produces a fully hollow, outlined letterform.

Why is it still prefixed with -webkit- if it's not just a Safari thing?

-webkit-text-stroke shipped first in WebKit and Chromium-based browsers adopted the same prefixed name for compatibility, and while Firefox now also supports it, no browser ships an unprefixed text-stroke yet — so the -webkit- prefix is still required everywhere it works.

What if a browser doesn't support text-stroke at all?

The generated CSS includes a text-shadow fallback that layers the stroke color in four directions (up, down, left, right) at the stroke width, which approximates an outline using a property with near-universal support, so text still reads as outlined rather than just losing the effect.

Will a thick stroke make the text harder to read?

A stroke wider than about 8-10% of the font size starts to eat into the letterforms' counters (the enclosed spaces in letters like 'e' or 'o'), so for body-sized text keep the stroke thin — thick strokes work best on large display headlines.

Is this generated locally?

Yes — the preview and CSS are computed entirely client-side with no upload.

CSS TEXT STROKE / OUTLINE GENERATOR

Build hollow or filled outlined headlines and copy the CSS.

Toolbox

Text

Stroke width: 2px

Font size: 64px

Font weight: 700

Hollow (transparent fill)

Stroke color

Fill color

Presets

CSS

.text-stroke {
  font-size: 64px;
  font-weight: 700;
  -webkit-text-stroke: 2px #f2e9dc;
  color: transparent;
  text-shadow: -2px 0 0 #f2e9dc, 2px 0 0 #f2e9dc, 0 -2px 0 #f2e9dc, 0 2px 0 #f2e9dc;
}

HTML

<span class="text-stroke">Toolbox</span>

How to build a CSS text stroke

1
Type your headline text.
2
Pick a preset or set your own stroke width and color.
3
Choose a fill color — or leave it transparent for a fully hollow outline.
4
Adjust font size and weight so the stroke reads clearly at your target size.
5
Copy the CSS (with its fallback) and the HTML markup.

Questions

What does -webkit-text-stroke actually do?: It draws an outline of a given width and color around each glyph's outer edge, independent of the text's fill color set separately — combined with color: transparent it produces a fully hollow, outlined letterform.
Why is it still prefixed with -webkit- if it's not just a Safari thing?: -webkit-text-stroke shipped first in WebKit and Chromium-based browsers adopted the same prefixed name for compatibility, and while Firefox now also supports it, no browser ships an unprefixed text-stroke yet — so the -webkit- prefix is still required everywhere it works.
What if a browser doesn't support text-stroke at all?: The generated CSS includes a text-shadow fallback that layers the stroke color in four directions (up, down, left, right) at the stroke width, which approximates an outline using a property with near-universal support, so text still reads as outlined rather than just losing the effect.
Will a thick stroke make the text harder to read?: A stroke wider than about 8-10% of the font size starts to eat into the letterforms' counters (the enclosed spaces in letters like 'e' or 'o'), so for body-sized text keep the stroke thin — thick strokes work best on large display headlines.
Is this generated locally?: Yes — the preview and CSS are computed entirely client-side with no upload.