CSS Text Stroke Generator

-webkit-text-stroke paints an outline around each glyph. It is shorthand for -webkit-text-stroke-width plus -webkit-text-stroke-color, so "-webkit-text-stroke: 2px #000" is a 2px black outline. The stroke is centered on the glyph edge by default — half sits outside the letter, half covers the fill — which is why this generator also emits "paint-order: stroke fill". Despite the -webkit- prefix, every modern browser ships it; there is still no widely supported unprefixed text-stroke, so keep the prefix.

Chrome, Edge, Opera and Safari have supported -webkit-text-stroke for years, and Firefox added support in version 49. Internet Explorer 11 and very old browsers do not support it at all. The text-shadow fallback this tool generates covers those cases: it draws the same outline with layered shadows, a technique every browser since the early 2010s understands.

It places N copies of the text silhouette around the original — one shadow per direction on a circle whose radius equals the stroke width. You can choose 8, 16 or 24 directions; more directions give a smoother curve. Because shadows render behind the text, only the outer half of the simulated stroke is visible, which closely matches a real stroke. The trade-off is paint cost: dozens of shadows on a large animated heading can slow scrolling, so prefer -webkit-text-stroke wherever it is supported.

By default a text stroke is centered on the glyph outline, so half of it eats into the fill color and thin fills can look pinched. "paint-order: stroke fill" tells the browser to paint the stroke first and the fill on top, producing a clean outline that never covers the letterforms. Firefox and Chromium honor it on HTML text; browsers that ignore it simply keep the centered stroke, which still looks fine. Leave it on unless you need the exact legacy rendering.

Set the fill to transparent — the Hollow preset on this page does exactly that. The output uses "color: transparent", which works everywhere, so the inside of each letter shows the background while the stroke and its text-shadow fallback stay visible. For a true knockout effect on busy backgrounds, pair it with a high-contrast stroke color and a slightly larger width.

Stroke width is set in px, so it does not scale with font-size the way glyphs do: a 2px stroke looks bold on 24px text but hairline on 120px text. As a rule of thumb, keep the width around 2–4% of the font size (2px at 72px, 4px at 144px). If your design scales fluidly, consider an em-based width in your own stylesheet — this tool outputs px for maximum compatibility.

Yes. -webkit-text-stroke-width and -webkit-text-stroke-color are animatable, so you can transition or keyframe them for effects like an outline that draws itself on hover. The text-shadow fallback is also animatable but far more expensive — animating 16 or more shadows forces repaints every frame, so use the native property for animated text.

No. Everything on this page — the live preview, the CSS generation and the copy button — runs as plain JavaScript in your browser with zero network requests. You can disconnect from the internet after the page loads and the generator keeps working; nothing you type ever leaves your device.