Why does an outlined heading look eroded at thick widths?

Because the stroke is centred on the glyph outline rather than drawn outside it, so half of its width lands inside the letter. Painted after the fill it covers that inner half and thins the form. Setting the paint order to stroke first and fill second restores the letter and leaves the outline outside, which is why the generated CSS includes it.

Why is the preview always at weight 800?

Because hollow lettering needs heavy forms. A light weight has thin strokes to begin with, and an outline drawn on top of a hairline stem leaves a shape that reads as two parallel lines rather than a letter. The preview therefore shows the setting at a weight that works, and the CSS leaves the weight to the component it is pasted into.

Is a transparent fill the same as no fill?

For the hollow look it is, and the difference appears when the background is not flat. A transparent fill lets whatever is behind the text show through the counters, while a fill set to the background colour blocks it. On a flat surface the two are identical; over an image they are not.

What stroke width should I use?

Judge it as a share of the em rather than in pixels. A stroke of about 1 to 3 percent of the em reads as a fine outline, while 5 percent and above starts to look like a frame, and the readout reports the ratio for the values you enter. Large display sizes tolerate a heavier stroke than small ones for the same reason.

Can I outline text with a gradient stroke?

Not with this property, since the stroke takes a single colour. A gradient outline needs the text rendered as an SVG path with a stroked shape, or the gradient applied to the fill instead. The text gradient maker covers the fill case, which is the one that usually looks better anyway.

Outlined Text Generator

Outline

Text

Font sizepx

Stroke widthpx

Letter spacingem

Stroke colorFillBackground

Stroke at this size2px (3.13% of em)

Paint orderstroke then fill

Browser support-webkit-text-stroke: all modern browsers

Preview

OUTLINE

CSS

.outlined-text {
  font-size: 64px;
  letter-spacing: 0.04em;
  color: transparent;
  -webkit-text-stroke: 2px #111827;
  paint-order: stroke fill;
}

You Might Also Need

Shadow Text Generator

Generate shadowed text

3D Text Effect Preview

Preview 3D text effects

Text Gradient Maker

Create CSS text gradients

Logo Type Tester

Test type as a logo

The outlined text generator produces hollow lettering with CSS, where the outline is drawn by a text stroke and the paint order keeps that stroke from eating into the glyph. The paint order is the part that makes thick outlines look right rather than eroded.

What is Outlined Text Generator?

The outlined text generator takes a string, a size, a text stroke width and two or three colours, then renders the result and exports the CSS that produces it.

The stroke width runs from half a pixel to 8px, reported both in pixels and as a percentage of the em so the weight of the outline can be related to the type size.
The fill can be transparent for a hollow letter, white, near-black or amber, and the background is a separate colour so the hollow can be judged against the surface it sits on.
Size spans 24px to 160px and letter spacing from 0 to 0.2em, which is the range hollow caps need, since a stroke makes letters look tighter than a solid fill does.
The readout states the paint order as stroke then fill, which is the setting that stops the stroke from cutting into the counters.
Browser support is reported as complete for the stroke property across modern browsers, which is why it is the technique used here rather than an SVG outline.

The order of painting is the whole trick. A stroke is centred on the glyph outline, so half of its width falls inside the letter and, painted over the fill, it erodes the shape from within. Setting the paint order to stroke first, fill second puts the fill back on top of the inner half, which leaves the outline sitting outside the letterform at its intended weight. That matters most at thick widths in hollow text, where an eroded cap can close its counters entirely. The stroke is also reported as a share of the em, because a 2px outline on a 64px letter is a fine line while the same 2px on a 24px letter is a heavy frame, and the ratio is what tells you which you are looking at.

The preview sets the weight to 800 regardless of the chosen face, since hollow lettering needs heavy forms to stay legible, so the result is not a preview of a light or regular weight.
Nothing checks the stroke colour against the background, so an outline in a colour close to the surface can be produced and will be hard to read.
Fill options are a fixed list of four, so an arbitrary fill colour has to be typed into the CSS after copying.
Descenders and fine terminals can still look pinched at the heaviest stroke widths, and the preview is the place to notice it.
The output is CSS only: no image export, and nothing rasterises the result for use where a picture is required.

Use it for display caps where the hollow form is the design: a hero heading, a section number, a poster line. Keep the stroke width at a small share of the em for anything that has to be read at a distance, and check the outline colour against the background rather than trusting the preview's contrast. Where the letter needs depth rather than an edge, the shadow text generator stacks soft layers, the 3D text effect preview builds an extrusion, and a fill that changes across the letter is the text gradient maker's job.

How to use Outlined Text Generator

Type the words in caps, since hollow lettering is nearly always a display setting and lowercase forms lose their counters first.
Set the size, then raise the stroke width and watch the percentage of em readout rather than judging the outline by eye alone.
Choose the fill and the background together, which is where a hollow letter is either legible or invisible.
Copy the CSS and paste it into the component, remembering that the paint order declaration is what keeps the stroke outside the letterform.

When to use Outlined Text Generator vs related tools

Reach for it when a display heading wants a hollow treatment, when a poster or a section number needs an outlined figure, or when someone has produced an outlined heading with a stroke that has eaten the letters and the fix has to be explained. The paint order line is usually the whole answer. Line heights and page placement can be checked against the same specification with the type scale generator, while the shadow text generator, the 3D text effect preview and the text gradient maker cover the other display treatments.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.