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.

Générateur de texte avec contour CSS

Créez des effets de texte avec contour grâce à -webkit-text-stroke. Aperçu en direct avec remplissage transparent, uni ou en dégradé, plus une ombre portée optionnelle. Copiez le CSS en un clic.

Texte

Police

Graisse: 900

Taille: 96px

Épaisseur du contour: 2px

Couleur du contour

Remplissage

Ajouter une ombre portée

Aperçu

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 est pris en charge par tous les navigateurs modernes malgré le préfixe. Associez-le à color: transparent (ou à background-clip: text pour un dégradé) pour obtenir des lettres creuses. En dessous de 24px, le contour peut casser la lisibilité — gardez l'épaisseur sous 2px pour les petites tailles.

Comment utiliser

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.

Fonctionnalités

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

Questions fréquentes

En savoir plus

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