News

How to add CSS3 paper curl effects

Find out how to combine pseudo-elements to add multiple drop shadows to page objects

papercurl

What are paper curls?

Curled paper effects are fairly trendy in web design these days. Basically, we’re referring to the illusion of adding subtle drop shadows to the corners of a flat page element. This makes the corners appear raised from the webpage, adding a sense of 3D. Typically performed using images, thanks to CSS3 we can now do it with just a few lightweight lines instead!

Nested <div> boxes

The trick is formed using the :before and :after pseudo-elements attached to a <div> object. You can only have two of these per element, so we will overlay a pair to add shadows to the bottom and right edges (four corners). Start by adding the nested <div> objects named ‘paper1’ and ‘paper2’ into the <body> of your HTML document, with basic styling as follows:

001 <!-- HTML --> 
002 <body>
003 <div class=”paper1”>
004 <div class=”paper2”>
    Your Content Here<div>
005 </div>
006 </body>
007 
007 /* CSS */
008 div {
009 position: relative;
010height: 600px;
011  width: 1000px;
012 }
013 #paper1
014 {
015 margin: 300px auto;
016 background: radial-gradient
    (circle, white, #00ABF5);
017 }

The initial pseudo-elements

The first pseudo-elements for our ‘paper1’ <div> will form thin strips, providing shadow for the bottom left and right corners. Our CSS class sets the size and positioning. Crucially, we then use a 2D transform to angle the black drop shadow upwards and inwards from the corner points. The z-index property then hides the pseudo-element below.

Override the :after class

Next we override the styles for #paper1:after so that the second pseudo-element appears on the bottom-right corner. It also adopts an inversion of our last transform, so it is essentially flipped with positive degrees of skew and rotation.

001 #paper1:after
002 {
003     
004 left: auto;
005 right: 3px;
006 transform: skew(5deg) rotate(3deg);
007 }

Right-edge shadows

We apply the exact same principle to style pseudo-elements for our ‘paper2’ <div> box. This time the edge strips and shadows are oriented to point out from the right edge’s top and bottom corners. In this instance we make the shadow grey in colour, with some new transform adjustments:

001 #paper2:before, #paper2:after
002 {
003 position: absolute;
004 width: 1.5%;
005 height: 50%;
006 top: 10px;
007 right: 6px;
008 content: “”;
009 box-shadow: 5px 6px 16px grey;
010 transform: skew(-8deg) rotate(-6deg);
011 z-index: -1;012 }

Bottom-corner shadow

Once again we override the :after pseudo-element to position accordingly, before inverting the transform as we’ve done before. It can take some tweaking here to ensure that each of the shadows appears exactly where you want them, as you won’t want to see any of the pseudo-elements sticking out beyond the edge of your <div> box.

001 #paper2:after
002 {
003 top: auto;
004 bottom: 3px;
005 transform: skew(8deg) rotate(6deg);
006 }

Preview and tweak

If your browser natively supports the standard CSS3 syntax you should now be able to preview successfully. Otherwise, you will need to add vendor prefixes for box-shadow and transform. Also, if you toggle the two z-index properties in our CSS by commenting, the four pseudo-elements appear visible. This can probe helpful when adjusting, positioning and transforming, if you wish to edit the effect.

001 /* z-index: -1; */
002 
×