CSS Text Stroke (Outline) Generator with Live Preview
Generate a CSS text outline with -webkit-text-stroke using width, stroke color and fill color, with a live preview and copyable code — runs 100% in your browser, no upload.
-webkit-text-stroke: 2px #000000; color: #ffd000;
🔒 The preview and CSS are generated in your browser — nothing is uploaded.
What this text stroke generator does
This tool builds a CSS text outline using the -webkit-text-stroke property. Choose a stroke width with the slider, pick the stroke (outline) color and the fill (text) color, and type your own sample text to see the result render instantly above the code. When it looks right, one click copies a ready-to-paste block containing the -webkit-text-stroke declaration and the matching color line, so you can drop it straight into your stylesheet. It is handy for headline treatments, hollow or knockout text, badges and playful display type where a plain fill is not enough.
How the stroke value is built
A CSS text stroke is written as -webkit-text-stroke: width color, where the width is a length in pixels and the color paints the edge of each glyph. This generator joins your slider width (in px) with the stroke color you picked, and pairs it with a separate color declaration for the fill so the two are independent — you can keep a light fill with a dark outline or invert them for a hollow look. The output is deterministic: the same width and colors always produce the same code, and a width of 0 simply removes the outline.
Frequently asked questions
Why does the property start with -webkit-?
Text stroking is exposed through the vendor-prefixed -webkit-text-stroke property, which is supported across Chrome, Edge, Safari and Firefox. Using the -webkit- prefix is the reliable, widely supported way to outline text today, which is why the generated code uses it.
What is the difference between the stroke color and the fill color?
The fill color is the normal color of the text, set with the CSS color property, while the stroke color paints an outline around the edges of each letter. Setting a wide stroke with a fill that matches the background produces a hollow, outline-only look.
Is anything I type uploaded to a server?
No. The live preview and the generated CSS are produced entirely in your browser with JavaScript. Your sample text, chosen colors and stroke width are never sent, stored or uploaded anywhere.