How to Create Stacked Paper Effect

Stacked Paper effect technique helps you create a content container that looks like a sheet of paper. You can stack sheets of paper below the first sheet and add a 3D style to your website and give it a realistic look.

We can create the Stacked Paper effect using some CSS properties and selectors that make a simple HTML element look like a stack of paper sheets.

It is straightforward if you follow the steps described below.

Create HTML

Place an <article> tag in your HTML.
Create a paragraph where you should add your content.
In the <h2> tag, write the title of the article.

<article>
  <h2>Article title here</h2>
  <p>Lorem ipsum is simplu dummy text...</p>
</article>

Add CSS

Use ::before and ::after to create an empty pseudo element (content: "";) and then position it absolutely behind (z-index: -1;) the article.
Use the transform property to rotate the pseudo-elements, to give a stacked paper effect.
Use the box-shadow property to create an overall effect.

Note that we have to use -webkit- and -moz- extensions with the transform and box-shadow properties so as they can be supported by all browsers.

article {
  position: relative;
  margin: 50px auto;
  padding: 40px 0;
  width: 500px;
}

article::before,
article::after {
  content: "";
  width: 490px;
  height: 250px;
  position: absolute;
  left: -2px;
  top: -5px;
  z-index: -1;
  -moz-transform: rotate(-2deg);
  -webkit-transform: rotate(-2deg);
  transform: rotate(-2deg);
}

article::after {
  left: 0;
  -moz-transform: rotate(-1deg);
  -webkit-transform: rotate(-1deg);
  transform: rotate(-1deg);
}

article,
article::before,
article::after {
  background: #fff;
  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

h2,
p {
  margin: 0 40px 16px;
  padding: 0;
}

h2 {
  line-height: 1;
  font-size: 32px;
  font-weight: 700;
}

p {
  line-height: 1.2;
  font-size: 16px;
}

Here is the result of our code.

Example of adding a stacked paper effect:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      article {
        position: relative;
        margin: 50px auto;
        padding: 40px 0;
        width: 500px;
      }
      article::before,
      article::after {
        content: "";
        width: 490px;
        height: 250px;
        position: absolute;
        left: -2px;
        top: -5px;
        z-index: -1;
        -moz-transform: rotate(-2deg);
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
      }
      article::after {
        Exampleleft: 0;
        -moz-transform: rotate(-1deg);
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg);
      }
      article,
      article::before,
      article::after {
        background: #fff;
        -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
        -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
      }
      h2,
      p {
        margin: 0 40px 16px;
        padding: 0;
      }
      h2 {
        line-height: 1;
        font-size: 32px;
        font-weight: 700;
      }
      p {
        line-height: 1.2;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <article>
      <h2>Article title here</h2>
      <p>Lorem ipsum is simplu dummy text...</p>
    </article>
  </body>
</html>

Try it Yourself »

Result

Article title here

Lorem ipsum is simplu dummy text...

Example of creating a stacked paper effect:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: linear-gradient(#0042ad, #fff);
        padding: 20px;
      }
      .letter {
        background: #ffffff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        margin: 26px auto 0;
        max-width: 550px;
        min-height: 300px;
        padding: 24px;
        position: relative;
        width: 80%;
      }
      .letter:before,
      .letter:after {
        content: "";
        height: 98%;
        position: absolute;
        width: 100%;
        z-index: -1;
      }
      .letter:before {
        background: #fafafa;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
        -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
        left: -5px;
        top: 4px;
        transform: rotate(-2.7deg);
        -webkit-transform: rotate(-2.7deg);
        -moz-transform: rotate(-2.7deg);
      }
      .letter:after {
        background: #f6f6f6;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
        right: -3px;
        top: 1px;
        transform: rotate(1.4deg);
        -webkit-transform: rotate(1.4deg);
        -moz-transform: rotate(1.4deg);
      }
    </style>
  </head>
  <body>
    <div class="letter">
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
    </div>
  </body>
</html>