Free CSS Text Stroke Generator

Where CSS text stroke came from

The idea of stroking a glyph predates CSS by decades; it is native to PostScript (Adobe, 1984) and was carried into SVG 1.1 (W3C Recommendation, 2nd Edition, 16 August 2011), which defines the stroke, stroke-width, stroke-linecap, and stroke-linejoin paint attributes for any shape including <text>. CSS got its own version when Apple shipped -webkit-text-stroke in Safari 3 in June 2007, alongside -webkit-text-fill-color. The property was never standardised in any shipping W3C spec; it lives in the CSS Text Decoration Module Level 4 Editor's Draft as unprefixed text-stroke, but as of 2026 the unprefixed name is still not enabled in any browser. Firefox 49 (20 September 2016) and Edge 15 (5 April 2017) both added -webkit-text-stroke as an explicit web-compatibility alias to handle pages that use only the WebKit-prefixed name. In production, write the prefix.

Three ways to outline text on the web

There is more than one way to draw an outline around text. The right tool depends on the width, the legibility budget, and whether the underlying glyphs need to stay sharp:

• -webkit-text-stroke: the property this generator emits. One line of CSS, GPU-composited, free at any framerate. The stroke is drawn centered on the glyph outline, half inside and half outside, which means thick strokes start eating into the letterforms.
• Four-direction text-shadow: the universal fallback that works in every browser back to IE 10. text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; stacks four 1-pixel shadows in each corner to fake a 1 px outline. Defined in CSS Text Decoration Module Level 3 (W3C Candidate Recommendation August 2019). At wider strokes the stair-step artefacts become visible; eight or sixteen directions can smooth them at the cost of more shadows.
• SVG <text> with paint-order: stroke fill;: the right answer when you need a thick stroke without ink bleeding inside the letterform. The paint-order property draws the stroke first, then the fill on top, so the fill stays at its full advertised width.

Accessibility: contrast logic, body-text-no, decorative-yes

WCAG 2.1 Success Criterion 1.4.3 «Contrast (Minimum)» (W3C Recommendation 5 June 2018) requires 4.5:1 contrast for normal text and 3:1 for large text (18 pt / 14 pt bold). With a stroke applied, the visually dominant edge of the glyph is the stroke colour, so the contrast check has to compare that colour against the background, not the fill. A common failure: a yellow logo on white with a thin black stroke passes if you check black vs. white, but the body of the letter is yellow on white and reads badly at small sizes. Strokes destroy legibility on body text. Below 16 px font size, a 1 px stroke fills 10 to 15 percent of the glyph interior and a 2 px stroke can close counters (the holes in «a», «e», «o»). Reserve text stroke for headings, display type, and decorative use; never apply it to paragraph text without explicit testing at every breakpoint.

When a text stroke is the right tool

• Comic-book and gaming UI titles: the classic Marvel / Nintendo bold-black-stroke-on-bright-fill look.
• Watermarks and decorative overlays: semi-transparent stroke only, no fill, sitting over imagery.
• Tutorial graphics, screenshots, callouts where text must stand out against an unknown background.
• «Ghost» buttons where the button text uses a stroke and transparent fill to feel weight-matched with the bordered button itself.
• Outline-only headings in editorial design, the «hollow letter» look that was big in the late-2010s.

Common mistakes

• Forgetting the -webkit- prefix. The unprefixed text-stroke is in Editor's Draft status only and not shipped. Always write the prefixed form in production.
• Trying to animate -webkit-text-stroke-width. It is not on the list of animatable CSS properties. Transitions will «snap» rather than tween. Animate text-shadow or use SVG when motion is required.
• Applying a stroke to small text. Below 16 px the stroke fills the glyph interior and closes letter counters. Set a minimum font-size guard with a media query.
• Combining wide strokes with tight letter-spacing. The stroke crosses between adjacent glyphs and produces grey smudges where the shapes touch.
• Counting the stroke colour as the «text colour» in contrast checks. Both the fill and the stroke must clear WCAG 1.4.3 against the background.
• Not testing print stylesheets. Strokes can render dramatically thicker or thinner when printed, especially on browsers that downscale colour gamut for PDF output.

More frequently asked questions

Why does my stroke look thicker on a Retina display than on a 1080p monitor?

It does not, in CSS pixels. A 2px stroke is exactly 2 CSS pixels on both. What changes is the perceived sharpness: on a Retina (2× DPR) display, a 2 CSS pixel stroke is 4 device pixels and antialiases cleanly. On a 1× display, 2 device pixels give a noticeably blurrier edge. If you need a hairline that snaps to one device pixel on Retina, write 0.5px; browsers round to one device pixel on high-DPR screens.

Can I have a different stroke colour for each letter?

Not with a single -webkit-text-stroke declaration. Either wrap each letter in a <span> and style individually, or use SVG <tspan> elements with their own stroke attribute. The ::first-letter pseudo-element accepts text-stroke if you only need the first letter to differ.

How thick a stroke is too thick?

A practical ceiling is about 8 percent of the font-size. At 100 px font, that is 8 px stroke; beyond that the letters start to overlap each other. If you want a thicker outline visual, use SVG <text> with paint-order: stroke fill; so the fill stays at original width and the stroke extends only outward.

Does -webkit-text-stroke work on emoji?

On colour emoji (the default in modern browsers), the stroke applies to the outer silhouette of the emoji glyph. The result is usually subtle because the emoji already has its own outline and shading. For black-and-white emoji (the text font variation), the stroke applies cleanly like any other glyph.

Is anything sent to a server?

No. The text you type into the preview, the colours you choose, and the generated CSS are all processed in your browser's JavaScript. No network call is made. Open the Network tab in DevTools to verify.