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

Erzeuge Konturschrift-Effekte mit -webkit-text-stroke. Live-Vorschau mit transparenter, einfarbiger oder Verlaufs-Füllung plus optionalem Schatten. CSS in einem Klick kopieren.

Text

Schriftart

Schriftstärke: 900

Schriftgröße: 96px

Konturbreite: 2px

Konturfarbe

Füllung

Schlagschatten hinzufügen

Vorschau

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 wird trotz Präfix in jedem modernen Browser unterstützt. Kombiniert mit color: transparent (oder background-clip: text für einen Verlauf) entstehen hohle Buchstaben. Bei sehr kleinen Schriftgrößen kann die Kontur die Lesbarkeit zerstören — halte die Konturbreite unter 2px bei Schriftgrößen unter 24px.

Anleitung

Erzeuge Konturschrift-Effekte mit -webkit-text-stroke. Live-Vorschau mit transparenter, einfarbiger oder Verlaufs-Füllung plus optionalem Schatten. CSS in einem Klick kopieren.

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.

Funktionen

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

Häufig gestellte Fragen

Mehr erfahren

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