CSS text stroke generator — outlined and hollow lettering

How to use the CSS text stroke generator

1. Type the Text to preview and set the Font size (16–200 px) and Weight (400, 700 or 900).
2. Set the Stroke width (0.5–12 px) and Stroke colour.
3. Keep Transparent fill ticked for hollow letters, or untick it and choose a Fill colour.
4. Leave Stroke behind the fill (paint-order) ticked for filled text with a cleaner outline.
5. Copy the .outlined rule.

What it does and when to use it

A text stroke draws a line around each letter. Hollow outlined words are popular in posters, sports graphics and large hero headings, often stacked with a solid version of the same word. Filled text with a dark stroke is the classic meme or comic caption look, and it keeps white text readable over a photo.

For a softer edge or glow instead of a hard line, use the text shadow generator. To check that the stroke colour stands out from your background, use the contrast checker, and for gradient-filled headings try the CSS gradient generator.

How it works

The rule sets the size, weight and fill colour (transparent for hollow text), then -webkit-text-stroke: <width> <colour>. When Stroke behind the fill is ticked it adds paint-order: stroke fill;. MDN notes that for HTML text, paint-order can only choose the order of stroke and fill, and lists it as Baseline widely available since March 2024.

Worked examples

Default hollow heading, 96 px, weight 900:

.outlined {
  font-size: 96px;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 2px #0f172a;
  paint-order: stroke fill;
}

With a transparent fill, the paint-order line has no visible effect, so you can drop it.

Caption-style white text. Fill #ffffff, stroke 4 px #000 (written back as #000000), size 72 px: the rule gets color: #ffffff;, -webkit-text-stroke: 4px #000000; and paint-order: stroke fill;. With paint-order, the fill covers the inner half of the stroke, so roughly 2 px of outline shows outside the letters and the letters stay full width.

A fine red outline, 1 px #e11d48, weight 700, 48 px, hollow, paint-order off: color: transparent; and -webkit-text-stroke: 1px #e11d48;. Thin strokes on lighter weights can look faint, so check them at real size.

Limits and tips

• Strokes grow inwards too. Without paint-order, a wide stroke on thin letters can fill in small gaps such as the holes in “e” and “a”.
• Very wide strokes suit heavy fonts at large sizes; at body sizes they turn letters into blobs.
• Selecting hollow text still copies the real characters, so search and copy-paste work normally.