Grow your CSS skills. Land your dream job.

Last updated on:

Page Curl Shadows

ul.box {
position: relative;
z-index: 1; /* prevent shadows falling behind containers with backgrounds */
overflow: hidden;
list-style: none;
margin: 0;
padding: 0; }

ul.box 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; }

ul.box li:before,
ul.box 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); }

ul.box 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

Comments

  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.

    Thank!

  2. Really nice snippet, looks really nice

  3. 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. 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 http://www.flickr.com/photos/martincasc/4373577269/ 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…

    http://betterwebshop.com/blog/2011/05/cross-browser-css-page-curl-shadow

  9. Very cool and nice effect really.

  10. Permalink to comment#

    Thanks…
    It’s working on my blog: http://www.medspatherapy.com

  11. lue
    Permalink to comment#

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

  12. 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. Here it is working again with skewX() — skew() support was removed from Firefox.

    http://jsfiddle.net/dropsoul/ts325/37/light/

  14. 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?

    http://jsfiddle.net/BpgXC/7/

    • 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. 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

Current day month ye@r *

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