CSS Text Stroke (Outline) Generator with Live Preview
Outline text with -webkit-text-stroke — set the stroke width and colour separately from the fill, for hollow or knockout type.
A stroke is centred on the outline, so a thick one eats half its width into the letter. Painting the stroke first lets the fill cover that inner half: the letter keeps its shape, and the outline you see is half the width you set.
Leave it empty to copy the declarations alone, for a style attribute or a rule you already have. The .css download is always a whole rule, under .outlined when no selector is given.
-webkit-text-stroke: 2px #000000; color: #ffd000;
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. Each color also has a hex box beside its picker — “Stroke color (hex)” and “Fill color (hex)” — so a hex copied from a design file can be pasted in; one that is not a hex keeps the last good color and a note says which box it is. 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. A width of 0 removes the outline. Lower Stroke opacity or Fill opacity and that color is written as rgba(); Fill opacity turned all the way down is the hollow letter. Type a Selector and the output becomes a whole rule; leave it empty for the bare declarations, and Download saves a .css file that is always a whole rule. Starting points loads Hollow headline, Sticker text or Ghost outline, and Preview background sets the preview on the page theme, white, black or another color without touching the CSS.
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; turning Fill opacity down to 0% makes the fill transparent outright.
Why does a thick stroke eat into my letters?
Because a stroke is drawn on both sides of the outline. Tick the paint-order option and the fill is painted over the stroke, so a thick stroke grows outward only.
Can I make the stroke semi-transparent, get a whole CSS rule, or start from a ready look?
Yes. Lower Stroke opacity or Fill opacity and that color is written as rgba() in the CSS and the preview; at full it stays the hex it was, and Fill opacity turned all the way down is the hollow letter. Type a Selector and the output and the copy become a whole indented rule; leave it empty for the bare declarations, for a style attribute or a rule you already have. Download saves text-stroke.css, always a whole rule, under .outlined when no selector is given. Starting points sets Hollow headline, Sticker text or Ghost outline — width, both colors and opacities, paint order and a background they read on.
Can I type or paste a hex colour instead of picking one?
Yes. Each picker has a hex box beside it, “Stroke color (hex)” and “Fill color (hex)”. A hex written as #rgb or #rrggbb, or #rgba or #rrggbbaa with transparency, goes straight into the CSS, the preview and the link; anything else keeps the last good colour, and a note under the boxes says which one is not a hex colour. A short or eight-digit hex also shows as its colour in the picker. Below full opacity, the opacity slider scales a typed hex's own transparency rather than replacing it.