Create stitched effect using CSS

CSS

Today we will discuss about creating an amazing stitched effect using CSS only. This type of effect can be easily created with the help of CSS border and box-shadow property. Complete CSS  and HTML code is given in this post, you just need to copy and paste the code. You can also customize this code according to your own requirements easily. Check the below given screenshot for demo of the code, the output of the code will be exact similar to screenshot.

Stitched effect using CSS

 

HTML Code

<div class="stitched"><h1>Stitched</h1></div>

 

CSS Code

.stitched {
  background-color: rgba(231, 21, 100, 1);
  width:250px;
  height:200px;
  padding: 20px;
  margin: 20px;
  color: #fff;
  border: 2px dashed #dcdcdc;
  box-shadow: 0 0 0 4px rgba(231, 21, 100, 1), 1px 1px 6px 4px rgba(231, 21, 100, .4);
}
.stitched h1
{
font-size:72px;
}

Leave a Reply

Your email address will not be published. Required fields are marked *