How to Outline Text in CSS

Hollow typography—where the inside of the text is transparent and only the outline is visible—is a massive trend in modern UI design. It looks exceptionally good as large background text behind images, or as dramatic hero headers. Historically, outlining text in CSS was complicated, but today we have two primary methods to achieve this effect. Our CSS Text Stroke Generator allows you to switch between both techniques effortlessly.

Method 1: `-webkit-text-stroke` (The Modern Way)

This is the cleanest and most efficient way to outline text. It behaves exactly like a border applied to standard HTML elements. To create hollow text, you combine this property with color: transparent;.

• Pros: Requires only one line of CSS. Renders perfectly crisp borders inside and outside the font glyph.
• Cons: As the `-webkit-` prefix suggests, it is not a fully standardized CSS property yet, although it is supported by almost all modern browsers including Chrome, Safari, and Edge.

Method 2: The `text-shadow` Hack (The Fallback)

If you need 100% strict cross-browser compatibility (including very old versions of Firefox or IE), you cannot rely on the webkit stroke. Instead, developers use a clever hack involving the text-shadow property.

By applying 8 distinct text shadows (Top, Bottom, Left, Right, and the 4 diagonal corners) with zero blur, you can force the browser to draw a solid outline around the text. Our generator automatically writes this complex, 8-directional mathematical CSS array for you based on the slider width you choose!

Design Rule: Hollow text effects look best on very bold font weights (like Black or 900). If you use a thin or normal font weight, the outline will swallow the inner text completely, making it illegible.