Grow your CSS skills. Land your dream job.

Last updated on:

Layered Paper

<div class="layered-paper">
.layered-paper {
    background: #eee;
        0 1px 1px rgba(0,0,0,0.15), /* The top layer shadow */
        0 10px 0 -5px #eee, /* The second layer */
        0 10px 1px -4px rgba(0,0,0,0.15), /* The second layer shadow */
        0 20px 0 -10px #eee, /* The third layer */
        0 20px 1px -9px rgba(0,0,0,0.15); /* The third layer shadow */

View Demo

Reference URL


  1. Kriti Sharma
    Permalink to comment#

    really nice designing with css

  2. Permalink to comment#

    Amazing effect! now my facebook fanbox has a layered effect…!

  3. Permalink to comment#

    I did something just like this the other day! After using box-shadow for this effect, I had a world of brainstorms-a-comin’ for more uses. Here’s a little screenshot of my use. Sorry – I can’t show more than this right now!

  4. Nice effect.

    Here’s a blogpost of a ‘paper stack’ I created last March using CSS3 –

  5. Permalink to comment#

    Awesome effect with CSS.

  6. Luke Patrick

    Is there perhaps a way to flip this effect so that it goes upwards, rather than down? Would be useful for a project I’m doing!


Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".