Is -webkit-text-stroke supported in production browsers?

Despite the prefix, yes — Chrome, Edge, Safari, Firefox, and Opera all support it (Firefox shipped support in version 49, way back in 2016). The prefix is one of those CSS oddities where the standard never caught up but every engine implemented the prefixed version. Just include both -webkit-text-stroke and text-stroke in your CSS and you're covered. The thing actually missing in older browsers is the combination with background-clip: text for gradient fills, which is fine since that has wide modern support too.

Why does my outlined text look fuzzy at small sizes?

-webkit-text-stroke renders the stroke inside the glyph outline, which means at small font sizes the stroke can eat half the letter shape. A 1px stroke on 12px text consumes a lot of the letter's interior. Two fixes: keep stroke widths under 1.5px below 24px font size, or use text-shadow with multiple offsets instead (text-shadow: -1px 0 black, 1px 0 black, 0 -1px black, 0 1px black) which renders the outline outside the glyph and stays crisp at small sizes.

Can I combine text-stroke with a gradient fill?

Yes — that's the recipe for the trendy 'gradient outline' effect. Set color: transparent, then add background: linear-gradient(...), background-clip: text, and -webkit-background-clip: text. The gradient fills the glyph interior and the stroke draws the outline. The gotcha is that some browsers don't compose stroke and background-clip cleanly — Safari sometimes draws the stroke under the background. The reliable workaround is to apply the stroke via text-shadow instead.

What's the difference between text-stroke and text-shadow for outlines?

text-stroke draws the outline inside-out from the glyph path — it's geometrically true to the typeface and looks razor-sharp at large sizes. text-shadow draws the outline by stacking shadow copies of the text — it sits outside the glyph, costs less browser computation, and degrades gracefully on tiny sizes. For headline-scale type (48px+), text-stroke. For body-scale type (under 24px), text-shadow. In between, test both — the difference is subtle but real.

Does text-stroke affect line height or spacing?

No — the stroke renders inside the existing glyph metrics, so the line box, baseline, and letter spacing don't change. This is one of the practical advantages over alternative approaches like adding an SVG overlay. You can drop text-stroke onto an existing element without breaking your layout. The only visual side effect is that thicker strokes can make the type look slightly heavier, so you may want to step the font-weight down by 100 to compensate.

CSS Text Stroke Generator

Create outlined text effects with -webkit-text-stroke. Live preview with transparent, solid, or gradient fills, plus optional drop shadow. Copy the CSS in one click.

Text

Font family

Font weight: 900

Font size: 96px

Stroke width: 2px

Stroke color

Fill mode

Add drop shadow

Preview

STROKE

CSS

.stroked-text {
  font-family: Impact, 'Arial Black', sans-serif;
  font-weight: 900;
  font-size: 96px;
  -webkit-text-stroke: 2px #0f172a;
  text-stroke: 2px #0f172a;
  color: transparent;
}

-webkit-text-stroke is supported in every modern browser despite the prefix. Pair it with color: transparent (or background-clip: text for a gradient) to get hollow letters. For very small type the stroke can clobber readability — keep stroke widths under 2px below 24px font sizes.

How to Use

Create outlined text effects with -webkit-text-stroke. Live preview with transparent, solid, or gradient fills, plus optional drop shadow. Copy the CSS in one click.

1Type the text you want to outline. Short headlines (3–10 characters) read best; the effect gets noisy on long sentences.
2Pick a font and weight. Bold weights (700–900) and display fonts like Impact or Arial Black give the cleanest stroke — thin fonts have too little room for the line to sit.
3Set the stroke width. 1–3px works for headline sizes (60–120px). Bigger strokes start to overlap and lose the open silhouette.
4Choose a fill mode. Transparent gives the classic hollow look. Solid is for two-tone (e.g. yellow letters with black outline). Gradient bleeds a fill into the open glyph — great for hero text.
5Toggle the drop shadow if the text needs to lift off a busy background. Then click Copy — the CSS goes straight into your stylesheet.

Key Features

Live preview at any font size, weight, and family — see exactly what your headline will look like before shipping
Three fill modes (transparent, solid, gradient) plus optional drop shadow — covers every common outlined-text recipe
Outputs both -webkit-text-stroke and text-stroke for cross-browser support
Works with any web font — drop the CSS variable into your design system and the effect inherits
Pure client-side — no server processing, no signup, no tracking

Frequently Asked Questions

Learn More

CSS Text Stroke in 2026 — How to Get Outlined Type That Actually Looks Good