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 prefixes 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;
}

Comments

  1. User Avatar
    Chris
    Permalink to comment#

    That’s pretty sweet, another great snippet Chris

  2. User Avatar
    Jacob Harris
    Permalink to comment#

    This is super cool, thanks for sharing.

  3. User Avatar
    suzyo
    Permalink to comment#

    SWEET!

  4. User Avatar
    Chris

    Would there be any way to put a background image on this?

  5. User Avatar
    Sandro
    Permalink to comment#

    Awesome man! Gonna use this in the near future :-)

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag