The CSS Text Stroke Generator adds an outline around text and lets you copy the CSS. Set the stroke width and colour, choose whether the text keeps a solid fill or is outline-only (transparent fill), and adjust the preview text, size, and background to see exactly how it looks.
It uses the -webkit-text-stroke property, which draws a border along the edges of each glyph and is supported across all modern browsers. Start from a preset like Classic, Outline, or Ghost and fine-tune from there. Everything runs in your browser.
How to use the text stroke generator
- Type your preview text and pick a preset, or set the stroke width and colour.
- Toggle “Outline only” for hollow text, or keep a solid fill and choose the fill colour.
- Adjust the font size and background to check contrast.
- Copy the generated CSS and apply the .text-stroke class to your heading or label.
How -webkit-text-stroke works
The -webkit-text-stroke shorthand takes a width and a colour and paints a stroke along the outline of each character. It is drawn on top of the text’s fill, so a thick stroke can eat into thin letterforms — keep the width modest relative to the font size, and use a bold, large font for the cleanest result. Despite the -webkit- prefix, it works in Chrome, Edge, Safari, and Firefox.
Fill vs. outline-only text
The fill of the text is controlled separately with -webkit-text-fill-color, which overrides the normal color property. Set it to a colour for solid text with an outline, or to transparent for hollow, outline-only text. This tool sets both color and -webkit-text-fill-color so the result looks right whether or not text-fill-color is honoured, and switches the fill to transparent when you enable outline-only.
Readability and fallbacks
Outline-only text can be hard to read at small sizes, so reserve it for large headings and display type, and make sure the stroke colour contrasts with the background. In the rare browser that does not support text stroke, transparent fill would make the text invisible — if you rely on outline-only text for critical content, provide a solid color fallback or consider a text-shadow-based outline instead.
Frequently Asked Questions
How do I add an outline to text in CSS?
Use -webkit-text-stroke with a width and colour, for example -webkit-text-stroke: 2px #111. This generator writes that for you along with the fill colour.
How do I make hollow (outline-only) text?
Enable “Outline only”, which sets -webkit-text-fill-color: transparent so only the stroke shows. Use a large, bold font and a contrasting stroke colour for the best result.
Does -webkit-text-stroke work in all browsers?
Yes. Despite the -webkit- prefix, text stroke is supported in all modern browsers including Chrome, Edge, Safari, and Firefox.
Why does a thick stroke make my text look thin or broken?
The stroke is drawn over the fill and grows inward as well as outward, so on thin fonts a large width can cover the letters. Reduce the stroke width or use a heavier, larger font.
What is the difference between text stroke and text shadow outlines?
text-stroke draws a true outline along each glyph and is crisp and simple. A text-shadow outline stacks multiple shadows to fake an outline; it works in every browser and can be softer, but it is heavier to write. Use the text shadow generator if you need that approach.