Stacked paper effect using CSS


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.

Stacked paper effect using CSS



<div class="paper-stack">


CSS Code

.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 *