<div class="papers">
  <h2>CSS3 shuffled paper effect</h2>
  <p>This example creates a shuffled paper effect using HTML and CSS3.</p>
  <p>You simply need to apply a class of "papers" to any element containing content.</p>
  <p>The paper effects can be modified in the CSS to change the width, padding, margin, color, border, angle of rotation, etc. The background paper is applied using :before and :after pseudo elements.</p>
</div>
<span style="font-size: 13px; line-height: 19px;">body</span>

{
font-family: sans-serif;
font-size: 100%;
color: #444;
background-color: #ddd;  
}

.papers, .papers:before, .papers:after  {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2);
}

.papers  {
  position: relative;
  width: 50%;
  padding: 2em;
  margin: 50px auto;
}

.papers:before, .papers:after  {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: rotateZ(2.5deg);
  -o-transform: rotate(2.5deg);
  transform: rotateZ(2.5deg);
  z-index: -1;
}

.papers:after  {
  -webkit-transform: rotateZ(-2.5deg);
  -o-transform: rotate(-2.5deg);
  transform: rotateZ(-2.5deg);
}

.papers h2  {
  font-size: 1.8em;
  font-weight: normal;
  text-align: center;
  padding: 0.2em 0;
  margin: 0;
  border-top: 1px solid #ddd;
  border-bottom: 2px solid #ddd;
}

.papers p  {
  text-align: left;
  margin: 1,5em 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.