What does this tool do?
The CSS Text Stroke Generator adds an outline to text with -webkit-text-stroke: you set the stroke width, stroke color, and fill color, then copy the ready CSS. It is used to create bold headings, hollow lettering, and eye-catching typographic effects. It is a fast effect tool for designers and frontend developers.
How to use it
- Adjust the values and options.
- See the result in the live preview.
- Copy the generated CSS/code into your project.
How it works
The tool turns your chosen width and stroke color into a rule like -webkit-text-stroke: 2px #000000, and maps the fill color to the color or -webkit-text-fill-color property. For a hollow, outline-only look, you can set the fill color to transparent. The output is ready-to-paste CSS you can drop straight into your stylesheet.
Common use cases
It is ideal for adding a striking outline to hero headings, wrapping text in a stroke to improve legibility over background images, and creating hollow typographic designs. It is also a frequent choice for logo text and poster-style headlines.
Frequently asked questions
Does -webkit-text-stroke work in all browsers?
Despite the prefix, the vast majority of modern browsers support it, including Chrome, Edge, Safari, and Firefox. Still, for critical text it is wise to keep a sensible fill color so readability survives if the stroke is not rendered.
How do I make the text hollow with only the outline showing?
Set the fill color to transparent so only the stroke line is visible and the inside of the letters stays see-through. Remember to choose a stroke width thick enough to keep the text legible.
Is CSS Text Stroke Generator free?
Yes. CSS Text Stroke Generator and all 300+ tools on MagmaNex are completely free with no signup or account required.
Is my data safe?
Yes. Everything runs locally in your browser. The data you enter is never sent to a server, stored, or shared.
Does it work on mobile?
Yes. CSS Text Stroke Generator works on phones, tablets and desktops — no app download needed.
🔒 Privacy: everything runs in your browser, your data is never sent to a server.