| <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%"> | |
| <text class="stroke-text" x="50%" y="50%">SVG STROKE TEXT</text> | |
| </svg> | |
| <footer>The Definitive Guide to <a href="http://www.coding-dude.com/wp/css/css-stroke-text/">Stroke Text CSS</a> made by <a href="http://www.coding-dude.com">Coding Dude</a></footer> |
| :root{ | |
| font-size:75px; | |
| font-family:sans-serif; | |
| font-weight:bold; | |
| text-align:center; | |
| margin-top:30vh; | |
| } | |
| .stroke-text{ | |
| font-size:70px; | |
| text-align:center; | |
| text-anchor:middle; | |
| stroke:dodgerblue; | |
| stroke-width:3px; | |
| fill:none; | |
| } | |
| footer{ | |
| position:absolute; | |
| bottom:50px; | |
| right:50px; | |
| font-size:13px; | |
| } |
CSS Stroke Text Using text-shadow. The idea is to have multiple shadows combined all around the text to give the illusion of a real stroke text.
Sample code for CSS text stroke definitive guide on coding-dude.com
A Pen by Ion Emil Negoita on CodePen.