How to Create CSS3 Paper Curls Without Images

In my previous posts, we discovered how to create speech bubbles and ribbons without additional HTML elements or images. They were achieved using CSS3 effects applied to the :before and :after pseudo-elements. In this post, we’ll use a similar technique to create a CSS3 paper curl effect.

Paper curls have been popular for a few years. The viewer sees a natural-looking slightly curved box but, in reality, it’s an optical illusion created by a shadow at the bottom of the element:

CSS paper curl

Until recently, you’d need to create the shadow as an image in Photoshop, Gimp or another graphics package. Ideally, it would be a 24-bit alpha transparent PNG which could be overlaid on any background — but that would cause issues in older browsrs.

Fortunately, CSS3 provides a great alternative with several benefits:

The effect works in modern browsers but won’t be applied in browsers which don’t support it.
The shadow can be overlaid on any background without requiring additional images.
The effect can be applied to elements of any size.
The code is reusable and uses far fewer bytes than an image-based shadow.
The shadow is easy to configure. You can change the color or depth with a few code tweaks.

First, let’s create our single HTML element:


<div class="box">My box</div>

and apply a little shading to the inside and outside:


.box
{
	position: relative;
	width: 500px;
	padding: 50px;
	margin: 0 auto;
	background-color: #fff;
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}

CSS paper curl

We now need curl effects on the bottom left and right edges. This is achieved by creating two :before and :after pseudo-elements which are:

rotated and skewed using CSS3 transforms (all the latest browsers support transforms with vendor prefixes)
positioned at the bottom edge, and
given a box shadow.

CSS paper curl

We can now move the elements behind the main box using z-index: -1. Therefore, just the edge of their shadow becomes visible:

CSS paper curl

The pseudo-element CSS code:


.box:before, .box:after
{
	position: absolute;
	width: 40%;
	height: 10px;
	content: ' ';
	left: 12px;
	bottom: 12px;
	background: transparent;
	-webkit-transform: skew(-5deg) rotate(-5deg);
	-moz-transform: skew(-5deg) rotate(-5deg);
	-ms-transform: skew(-5deg) rotate(-5deg);
	-o-transform: skew(-5deg) rotate(-5deg);
	transform: skew(-5deg) rotate(-5deg);
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	z-index: -1;
} 

.box:after
{
	left: auto;
	right: 12px;
	-webkit-transform: skew(5deg) rotate(5deg);
	-moz-transform: skew(5deg) rotate(5deg);
	-ms-transform: skew(5deg) rotate(5deg);
	-o-transform: skew(5deg) rotate(5deg);
	transform: skew(5deg) rotate(5deg);
}

That’s a lot of vendor-prefixed code to achieve an effect, but it requires fewer bytes and HTTP requests than a graphic.

Please see the demonstration page for an example. It works as expected in IE9, Firefox, Chrome, Safari and Opera. IE6, IE7 and IE8 degrade gracefully and will not show any shadow effects. All the CSS code is contained in the HTML source.

And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like Learn CSS3.
Comments on this article are closed. Have a question about CSS3? Why not ask it on our forums?

Frequently Asked Questions (FAQs) about Pure CSS3 Paper Curls

How can I create a paper curl effect using pure CSS3?

Creating a paper curl effect using pure CSS3 involves several steps. First, you need to create a container for your image. This container will have a relative position and overflow set to hidden. Next, you will create a pseudo-element for the container using the ::before selector. This pseudo-element will have an absolute position and will be transformed using the rotate and skew methods to create the curl effect. You will also need to add a box-shadow to give the curl some depth. Finally, you will add a linear gradient to the pseudo-element to create the illusion of a page curl.

Can I apply the paper curl effect to text?

Yes, you can apply the paper curl effect to text. However, it’s important to note that the effect may not be as pronounced on text as it is on images. This is because the curl effect relies on the manipulation of shadows and gradients, which may not be as noticeable on text.

Why isn’t my paper curl effect showing up?

If your paper curl effect isn’t showing up, there could be several reasons. First, check to make sure that your CSS syntax is correct. Even a small typo can prevent the effect from rendering correctly. Second, make sure that your browser supports the CSS3 properties you’re using. Not all browsers support all CSS3 properties, so it’s possible that the effect isn’t showing up because your browser doesn’t support it.

How can I customize the paper curl effect?

You can customize the paper curl effect by adjusting the values in the CSS properties. For example, you can change the size and position of the curl by adjusting the values in the transform property. You can also change the color and intensity of the shadow by adjusting the values in the box-shadow property.

Can I use the paper curl effect on a responsive website?

Yes, you can use the paper curl effect on a responsive website. However, you may need to adjust the size and position of the curl depending on the screen size. You can do this using media queries.

How can I add a hover effect to the paper curl?

You can add a hover effect to the paper curl by using the :hover pseudo-class. For example, you could change the color of the curl or make it larger when the user hovers over the image.

Can I use the paper curl effect with other CSS3 effects?

Yes, you can use the paper curl effect with other CSS3 effects. For example, you could combine the paper curl effect with a transition effect to create a curl that appears gradually.

Why does my paper curl effect look different in different browsers?

The paper curl effect may look different in different browsers due to differences in how browsers render CSS3 properties. To ensure consistency across browsers, you can use vendor prefixes.

Can I animate the paper curl effect?

Yes, you can animate the paper curl effect using CSS3 animations. For example, you could create an animation that makes the curl appear and disappear.

How can I make the paper curl effect more realistic?

You can make the paper curl effect more realistic by adding more detail to the curl. For example, you could add a gradient to the curl to give it a more three-dimensional appearance. You could also add a texture to the curl to make it look more like real paper.