Text Stroke Generator

-webkit-text-stroke: 2px #000 adds an outline around text. Despite the -webkit- prefix, it works in all modern browsers (Chrome, Firefox, Safari, Edge). Combine with color: transparent for hollow outline text, or keep the fill color for outlined + filled text.

text-stroke creates a true geometric outline that follows the text contours precisely. text-shadow outlines are approximated with multiple offset shadows and get blurry at larger sizes. text-stroke is cleaner and more performant, but text-shadow offers more creative flexibility.

Yes — both -webkit-text-stroke-width and -webkit-text-stroke-color are animatable with CSS transitions. You can create reveal effects by transitioning stroke width from 0 to a value, or color transitions for hover effects. Pair with color: transparent for dramatic outline animations.

text-stroke draws the outline centered on the text edge — half inside, half outside — which visually shrinks the letter forms. To compensate, increase font-weight slightly or use paint-order: stroke fill to draw the stroke behind the fill, preserving the original letter shapes.