Create a paper stack with CSS

If asked, you’d swear that the “paper-stack-like” content area of this website was achieved with one big image or bits of images. Thanks to CSS, that effect was not achieved with an image at all.

In this tutorial we’re going to learn how to create a paper stack with CSS transform and before/after pseudo elements.

  1. Create a DIV with the Class ”paper” as shown below.
  2. <div class="paper">
        <div class="paper-content">
            <h1> Awesome CSS paper stack</h1>
       </div><!-- End Paper Content -->
    </div><!-- End Paper -->
  3. Now replicate the block of CSS code below
  4.      .paper {
    	width: 70%;
    	height: 100%;
    	margin: 100px 0 100px 0;
    	position: relative;
    	background: #E5E8EC;
    	padding-bottom: 50px;
    	float: left;
    .paper .paper-content {
    	width: auto;
    	height: 100%;
    	-moz-transform: rotate(0deg);
    	z-index: 2;
            padding: 35px;
     .paper::before {
     content: "";
     background:  #E1BB70;
     position: absolute;
     height: 100%;
     width: 100%;
     z-index: -1;
     -moz-transform: rotate(1deg);
     float: left;
     left: 0%;
     .paper::after {
     content: "";
     background: #7FAE68;
     position: absolute;
     height: 100%;
     width: 100%;
     z-index: -2;
     -moz-transform: rotate(2deg);
     left: 0%;
     top: 0px;
  5. Use the Z-index property value to stack the papers in the order that you want them.

Note: Rotating “.paper::after” a little more bleeds it off “:.paper::before”, thereby making our paper stack effect realistic.

View working and editable example here

Please use the comment form below for your questions.

  • Mary says:

    It seems that there is a lot of dead space below my awesome paper stack. Unfortunately my site is not yet live so I can’ not link it here. Thanks for posting this!!

  • Chib says:

    Mary you can put it on Jsfiddle and I’ll take a look at it for you.

  • Leave a Reply