Stacked paper effect can be easily created by using before and after pseudo elements of CSS. Below given CSS code is for creating  an awesome stacked paper effect similar to the given screenshot. You can easily customize this code according to your choice by adjusting the size, color and other options of the element according to your requirement.


<div class="paper-stack">


.paper-stack, .paper-stack:before, .paper-stack:after
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2);
position: relative;
width: 300px;
padding: 20px;
margin: 40px auto;
.paper-stack:before, .paper-stack:after
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: rotateZ(.8deg);
-o-transform: rotate(.8deg);
transform: rotateZ(.8deg);
z-index: -1;
left: 9px;
top: 8px;
-webkit-transform: rotateZ(.7deg);
-o-transform: rotate(.7deg);
transform: rotateZ(.7deg);
left: 4px;
top: 4px;

Leave a Reply

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