Folded Paper Effect with CSS

by lovromar

HTML

<div class="paper"></div>

CSS

body {
    background-color: #778;
    padding: 6em 3em;
}
div {
    margin: 0 auto;
    min-height: 24em;
    width: 75%;
}

/* Paper Effect */

.paper {
    background-color: #eee;
    background-image: -webkit-linear-gradient(hsla(0,0%,0%,.025), hsla(0,0%,100%,.05) 33%, hsla(0,0%,0%,.05) 33%, hsla(0,0%,100%,.05) 67%, hsla(0,0%,0%,.05) 67%, hsla(0,0%,100%,.025));
    box-shadow: inset 0 0 0 .1em hsla(0,0%,0%,.1),
                inset 0 0 1em hsla(0,0%,0%,.05),
                0 .1em .5em hsla(0,0%,0%,.5);
    position: relative;
}
.paper:after,
.paper:before {
    bottom: 0;
    box-shadow: 0 0 .5em .5em hsla(0,0%,0%,.25);
    content: '';
    height: 3em;
    position: absolute;
    width: 80%;
    z-index: -1;
}
.paper:after {
    right: 1em;
    -webkit-transform: rotate(3deg);
    -webkit-transform-origin: 100% 100%;
}
.paper:before {
    left: 1em;
    -webkit-transform: rotate(-3deg);
    -webkit-transform-origin: 0% 100%;
}