Page Curl Shadows {
position: relative;
z-index: 1; /* prevent shadows falling behind containers with backgrounds */
overflow: hidden;
list-style: none;
margin: 0;
padding: 0; } li {
position: relative;
float: left;
width: 250px;
height: 150px;
padding: 0;
border: 1px solid #efefef;
margin: 0 30px 30px 0;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; } li:before, li:after {
content: '';
z-index: -1;
position: absolute;
left: 10px;
bottom: 10px;
width: 70%;
max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
max-height: 100px;
height: 55%;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-ms-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg); } li:after {
left: auto;
right: 10px;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
-ms-transform: skew(15deg) rotate(6deg);
-o-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg); }

Be careful that these boxes aren't sitting within another element that has a background, otherwise the negative z-index values (required for this to work) will force the shadows underneath that and not show up.

Reference URL


  1. Nico1485
    Permalink to comment#

    THANKS A LOT !!! This is glorious!

    I will make the page curl shadows with this technic in my sites. I’m thinking how to dregade it to IE, but that’s other story.


  2. Jrutlanddesign
    Permalink to comment#

    Really nice snippet, looks really nice

  3. Bountalis
    Permalink to comment#

    Hi nice snippet,

    but it makes problems if i had a div with a background-color and inside the snippet code and i dont understand why??

  4. Bountalis
    Permalink to comment#

    Oh, i see. Please ignore my comment :P
    It’s a nice snippet and i love these sort of shadow. Normally i do it with images but now…Thanks!

  5. Rasmus
    Permalink to comment#

    I’m going mad, trying to make it work when inside a div with a background property.

    How come the negative values are mandatory? Why on earth doesn’t css allow me to give :before and :after a lower (positive) value than the front element? (ie. 1, 2 and 3 instead of -2, -1 and auto)

    The only solution I’ve found is giving the parent div an even lower (negative) z-index value, but that renders everything in that div useless.

  6. Rasmus
    Permalink to comment#

    Eureka! I found the solution!! This can be done, even when nested in a div with a background color or image!

    Just add style=”-webkit-transform:rotate(0deg);transform:rotate(0deg);-moz-transform:rotate(0deg);” to the element with the .page-curl class.

  7. kete
    Permalink to comment#

    I want to imitate kde’s quadros with text on top. So far, I have a gradient for the odd list elements and an opposite gradient for the evens. Maybe I can pull it off.

  8. Josh

    That’s real nice, but it doesn’t work in IE. I worked up a way to accomplish it cross-browser here…

  9. Muhammad Faryad
    Permalink to comment#

    Very cool and nice effect really.

  10. Sammy
    Permalink to comment#

    It’s working on my blog:

  11. lue
    Permalink to comment#

    how do you increase the curl on just one corner any one please

  12. Christina Beymer
    Permalink to comment#

    This doesn’t work in the latest update of Firefox. It worked two days ago, before I upgraded. I don’t see this effect anywhere on the web with this browser.

  13. Christina Beymer
    Permalink to comment#

    Here it is working again with skewX() — skew() support was removed from Firefox.

  14. TheAmountof
    Permalink to comment#

    Thank you Christina, I had used the page curl shadow effect on a couple of sites and noticed over the weekend that they were all gone in FireFox. Now to go back and update my style sheets.

  15. Pat
    Permalink to comment#

    It really adds something interesting to the design of a website. Thank you

  16. josh lee
    Permalink to comment#

    thx for the great idea. playing around with it I encountered problems with images in the background though. any ideas?

    • josh lee
      Permalink to comment#

      setting the ’s ‘z-index’ to ‘-2’ does the trick.

  17. Julian K
    Permalink to comment#

    I noticed that if you put a border around the element, it appears behind the shadows. I fixed this by removing the z-index value of the parent element.

  18. Thanos
    Permalink to comment#

    Excellent because the effect isn’t hidden if other elements, with background, exist beneath the element with the effect.
    I was searching an idea to solve this problem and didn’t expect that if the parent element has relative position and big z-index could solve it.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.