Skip to content
Visuals and effects

-webkit-text-stroke

Draws an outline around text glyphs. It is useful for hollow or outlined display type.

34 effects in the catalog use this property.

Syntax

-webkit-text-stroke: <width> <color>;

Watch out

The stroke is centered on the glyph edge rather than drawn entirely outside it, so heavy strokes can close counters and narrow letterforms. Keep the width restrained.

Effects using -webkit-text-stroke

These are working effects from the catalog. Open a tile to inspect the full source.