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.

How to create paragraph and heading inside article tag

<article>
  <h2>Article title here</h2>
  <p>Lorem ipsum is simple 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.

Info

Note that modern browsers support transform and box-shadow natively, so vendor prefixes are no longer required.

How to add ::before, ::after pseudo elements, position, transform and box-shadow properties to our code

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;
  transform: rotate(-2deg);
}

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

article,
article::before,
article::after {
  background: #fff;
  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;
        transform: rotate(-2deg);
      }
      article::after {
        left: 0;
        transform: rotate(-1deg);
      }
      article,
      article::before,
      article::after {
        background: #fff;
        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 simple dummy text...</p>
    </article>
  </body>
</html>

Try it Yourself »

Result

Example of creating a stacked paper effect:

How to create a stacked paper effect with CSS pseudo elements and properties

<!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);
        left: -5px;
        top: 4px;
        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);
      }
    </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>

Try it Yourself »