Question 1

How do I create outlined text with CSS?

Accepted Answer

Use -webkit-text-stroke: -webkit-text-stroke: 2px #333. This adds an outline around text characters. For fill-less outlined text, also set -webkit-text-fill-color: transparent or color: transparent. The property is supported in all modern browsers with -webkit- prefix.

Question 2

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

Accepted Answer

text-shadow with 0 offset creates a soft glow-like outline: text-shadow: 0 0 0 3px #333. -webkit-text-stroke creates a crisp, hairline stroke at exactly the specified width. For clean outlined text, text-stroke is better. For soft glows and neon effects, text-shadow is more flexible.

Question 3

Does -webkit-text-stroke affect text width?

Accepted Answer

Yes — the stroke expands outward and inward from the text edge, which can affect character spacing and readability at large stroke widths. The stroke bleeds into the letterform at widths above ~2px. For large strokes, use SVG text with stroke-width instead, which supports stroke-linejoin for cleaner corners.

CSS Text Stroke Generator

Generated CSS

Related Tools