Here’s another fun text effect you can easily create using only a few lines of CSS. With this effect, you can give any text the appearance of being surrounded by hand-stitching. To see how it’s done, check out the tutorial below:
To start, you’ll need some text in your HTML. Give it a class of “stitched” (or something similar).
<div id="stiched">STITCHED</div>
We put the text in a div rather than a classic text tag (like h1, for example) because then there won’t be any inherent browser styling for the text that we have to override. To achieve the stitching effect, you’ll need to apply the following CSS to your div tag:
#stiched {
outline: 2px dashed #777;
outline-offset: -15px;
background-color: #555;
height: 150px;
width: 500px;
margin: 20px auto;
box-shadow: 2px 2px 2px #111;
-webkit-box-shadow: 2px 2px 2px #111;
-moz-box-shadow: 2px 2px 2px #111;
font-family: "Open Sans", "Gill Sans", sans-serif;
font-size: 100px;
text-align: center;
line-height: 150px;
color: #DDDDDD
}
Now your text should look like this:
As you might be able to tell, the stitched effect is achieved by using the outline property and making it dashed rather than solid. Using the outline offset property makes the dash appear within the div, rather than outside of it/on the border of it (learn more about the outline property by reading our outline vs. border tutorial).
We also use properties like box-shadow and background-color to give the stitched text more color and dimension. As always, colors, sizes, and font families are totally customizable — have fun with the code and change it to suit your own style or the style of your projects. Unlike some of the other text effect tutorials on this site, this one is pretty easy to customize (especially in terms of color) without ruining the effect. If you like this text effect, make sure you check out our other text effect tutorials!