Stacking -webkit-text-stroke-width layers with incrementally varying widths and alternating colors recreates retro multi-stroke text effects in CSS.
Key Takeaways
-webkit-text-stroke only accepts a single value, so the technique requires stacking multiple absolutely-positioned elements, each with a different stroke width.
Incrementally increasing text-stroke-width per layer causes browsers to draw progressively thicker outlines while preserving character shape, enabling visible color banding.
Firefox renders strokes smoother than Chrome and Safari; inline characters with this technique merge their outline shapes.
Performance degrades with larger font sizes, similar to CSS filters – not production-safe, better suited for static image generation via css-doodle.
Font choice heavily determines final output; the author uses @google-font() inside css-doodle to speed up font experimentation.
Hacker News Comment Review
One commenter asks whether stacked text-shadow could achieve the same effect with better cross-browser consistency, since shadows are also stackable in CSS.
