Create a Basic CSS Stitched Effect

Create a Basic CSS Stitched Effect

I know this has been done before lots of times, but this is a quick and easy effect done in CSS, which can help spice up your designs. Although I can’t think of a reason to use it myself in the ‘metro’ and Flat-UI trends of today, but just in case you want to give your DIVs a retro makeover, this is the tutorial for you.


There’s very minimal HTML for this tutorial. All we need is a DIV, with the class stitch. You can put whatever text, inputs, images or anything you like inside the DIV.

<div class=”stitch”>
Web, Tech & Gadgetry


Because it is a relatively simple design, there is little CSS needed. Of course, you can customise most of the options, such as the background colour, font styles and more. Also, it’s worth noting that in the featured image of this post and in the downloadable version of this tutorial, a little extra CSS is used to give the paper-styled background image.

Create a Basic CSS Stitched Effect

[blockquote ]

.stitch {
width: auto;
display: inline-block;
background-color: white;
padding: 25px;
margin: 10px;
color: #CCC;
font-size: 21px;
border: 2px dashed rgba(204,204,204,0.5);
border-radius: 10px;
box-shadow: 0px 0px 0px 6px white;
font-weight: normal;


And that’s it! As I mentioned earlier, it’s a very simple but effective technique. If you wanted to be more adventurous, you could make this effect look much more realistic and ‘retro’, but if you want it to look minimal and keep things simple, this is the best option for you. Enjoy!

You can download this completed tutorial from Dropbox.