Tools you might need next
Generate CSS gradient code. Linear and radial. Copy-paste ready. With preview. Free design tool with instant browser-based results — no account, works on
Generate CSS box-shadow. Offset, blur, spread, color. Visual editor with preview. Free design tool with instant browser-based results — no account, works on
Generate border-radius. Per corner. Visual editor. For rounded corners. Free design tool with instant browser-based results — no account, works on desktop and
-webkit-text-stroke applies a stroke around text characters. It uses the same stroke model as SVG. The stroke is centered on the character edge, meaning half goes inside and half outside.
-webkit-text-stroke: [width] [color]Text stroke is a WebKit prefixed property. For broader support, combine with text-shadow for a similar effect, or use SVG text for production-critical stroked text.
Updated: July 2026
Create outlined text with transparent fill and visible stroke for hero headings.
→ -webkit-text-stroke: 2px #000; color: transparent
Add thin dark stroke to light text over images to ensure readability.
→ -webkit-text-stroke: 1px rgba(0,0,0,0.5)
Keep stroke width ≤ 3px for body text. Thicker strokes eat into the character fill. For display text, 2-4px is usually the maximum before legibility suffers.
Always provide a fallback. Use @supports (-webkit-text-stroke: 1px black) to apply the effect only where supported, with a text-shadow fallback otherwise.
Generate CSS text-stroke and -webkit-text-stroke effects. Create outlined typography with adjustable width and color for headings, logos, and posters. It applies the webkit text stroke (-webkit-text-stroke: [width] [color]). For example: hollow text effect — Create outlined text with transparent fill and visible stroke for hero headings.