CSS Text Stroke Generator

Outline text with CSS

Outlined text, where each letter is drawn as an outline rather than a solid fill, is a strong graphic effect for headings and a practical way to keep text legible over busy or unpredictable backgrounds. This generator produces the CSS using the text-stroke property, with a custom stroke width, stroke colour and fill colour, so you can create anything from a thin outline to a bold hollow display heading. It gives you a reliable version of an effect that is otherwise fiddly to get right by hand.

How the stroke works, and its quirk

The effect draws a stroke of your chosen width and colour around the edge of each individual letter. Combined with a transparent fill it produces genuinely hollow outlined text, or with a contrasting fill it produces solid text with a defined edge that stands out on any background. The property is vendor-prefixed and behaves slightly differently from browser to browser, so generating the CSS with the correct prefix and a sensible fallback in place is considerably more reliable than trying to write it correctly from memory each time.

Copy the CSS

It runs entirely in your browser, so nothing you enter is uploaded and the generated code is yours to paste straight into a project. Because it works client-side, you can iterate freely, regenerating as often as you like without a round trip to any server.

Related tools

• Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
• Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
• Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
• Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.