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 文字描边生成器

用 -webkit-text-stroke 制作描边文字效果。透明、纯色或渐变填充加上可选阴影，实时预览，一键复制 CSS。

文字

字体

字重: 900

字号: 96px

描边宽度: 2px

描边颜色

填充方式

添加阴影

预览

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 虽然带前缀，但所有现代浏览器都支持。配合 color: transparent（或用 background-clip: text 做渐变填充）就能得到中空字。在 24px 以下的小字上，描边会影响可读性，建议把描边宽度控制在 2px 以内。

使用方法

用 -webkit-text-stroke 制作描边文字效果。透明、纯色或渐变填充加上可选阴影，实时预览，一键复制 CSS。

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.

主要功能

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

常见问题

了解更多

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