Why does paint-order matter for text stroke?

By default, strokes can encroach inward and obscure thin letterforms. Setting paint-order: stroke fill forces the stroke behind the fill, keeping typography crisp.

Updated: August 2026 • Verified v1.2

CSS Text Stroke & Hollow Outline Font Generator

Creative & DesignNew

Local Browser Execution: Your input is processed locally in your browser and is not sent to UTL servers.

-webkit-text-stroke: width color; paint-order: stroke fill; color: transparent;

Was this calculation helpful?

Understanding Your Results

Provides an interactive live preview of stroked typography, allows tuning stroke width, fill transparency, colors, font weight, and paint-order, and generates clean copyable CSS and SVG text markup.

Practical Guidance & Next Steps

Using paint-order: stroke fill ensures that thick border strokes expand outward without eating into the font's inner glyph fill.

What is this?

An interactive web design tool that generates pure CSS hollow text strokes and SVG vector outlines with real-time preview.

How does it work?

1. Enter your text and choose font size and weight. 2. Adjust stroke width, stroke color, and toggle transparent hollow fill. 3. Copy the generated CSS snippet or standalone SVG markup.