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以下に抑えましょう。

使い方

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