Stacked Paper Effect

A popular design technique is to create a content container that looks like a sheet of paper and to stack other sheets of paper below it, adding a layered or three-dimensional style. We can create this effect using straight up CSS, but there are multiple types of stacked paper designs we can consider. We'll provide snippets for four in particular.

Vertical Stack of Paper on Bottom

The idea here is that our content container is the top sheet of paper and more sheets are stacked beneath it with their edges displayed at the bottom of the top sheet.

See the Pen Stacked Paper Effect - Vertical by CSS-Tricks (@css-tricks) on CodePen.

<div class="paper"></div>

.paper {
  background: #fff;
  box-shadow:
    /* The top layer shadow */
    0 1px 1px rgba(0,0,0,0.15),
    /* The second layer */
    0 10px 0 -5px #eee,
    /* The second layer shadow */
    0 10px 1px -4px rgba(0,0,0,0.15),
     /* The third layer */
    0 20px 0 -10px #eee,
    /* The third layer shadow */
    0 20px 1px -9px rgba(0,0,0,0.15);
    /* Padding for demo purposes */
    padding: 30px;
}

Vertical Stack of Paper on Top

This is the same concept as the last one, but with the stack of papers revealed on the top of the container instead of the bottom. The only difference here is that we have repositioned the the box-shadoow property on the .paper element using negative numbers.

See the Pen Stacked Paper Effect - Vertical Top by CSS-Tricks (@css-tricks) on CodePen.

<div class="paper"></div>

.paper {
  background: #fff;
  box-shadow:
    /* The top layer shadow */
    0 -1px 1px rgba(0,0,0,0.15),
    /* The second layer */
    0 -10px 0 -5px #eee,
    /* The second layer shadow */
    0 -10px 1px -4px rgba(0,0,0,0.15),
     /* The third layer */
    0 -20px 0 -10px #eee,
    /* The third layer shadow */
    0 -20px 1px -9px rgba(0,0,0,0.15);
    /* Padding for demo purposes */
    padding: 30px;
}

Diagonal Stack of Paper

This is a slightly different method, where we use the ::before and ::after pseudo-elements to create the additional sheets of paper, rather than the box-shadow technique used in the previous examples.

See the Pen Stacked Paper Effect - Diagonal by CSS-Tricks (@css-tricks) on CodePen.

<div class="paper"></div>

/* Diagonal stacked paper effect */
.paper {
  background-color: #fff;
  /* Need position to allow stacking of pseudo-elements */
  position: relative;
  /* Padding for demo purposes */
  padding: 30px;
}

.paper,
.paper::before,
.paper::after {
  /* Add shadow to distinguish sheets from one another */
  box-shadow: 2px 1px 1px rgba(0,0,0,0.15);
}

.paper::before,
.paper::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #eee;
}

/* Second sheet of paper */
.paper::before {
  left: 7px;
  top: 5px;
  z-index: -1;
}

/* Third sheet of paper */
.paper::after {
  left: 12px;
  top: 10px;
  z-index: -2;
}

Disorganized Paper Stack

We can stagger the sheets of paper to create an intentionally messy look using the same sort of technique with pseudo-elements as the last example, though using the transform property to rotate the underlying sheets of paper. This example assumes the use of Autoprefixer or that orefixes are used for the transform property where browser support may wane.

See the Pen Stacked Paper Effect - Messy by CSS-Tricks (@css-tricks) on CodePen.

<div class="paper"></div>

.paper {
  background: #fff;
  padding: 30px;
  position: relative;
}

.paper,
.paper::before,
.paper::after {
  /* Styles to distinguish sheets from one another */
  box-shadow: 1px 1px 1px rgba(0,0,0,0.25);
  border: 1px solid #bbb;
}

.paper::before,
.paper::after {
  content: "";
  position: absolute;
  height: 95%;
  width: 99%;
  background-color: #eee;
}

.paper::before {
  right: 15px;
  top: 0;
  transform: rotate(-1deg);
  z-index: -1;
}

.paper::after {
  top: 5px;
  right: -5px;
  transform: rotate(1deg);
  z-index: -2;
}