<div class="box1">
    <div class="schatten1">
      1.Горизонтально изогнутая тень
    </div>
</div>

<div class="box2">
    <div class="schatten2">
      2.Вертикально изогнутая тень
    </div>
</div>

<div class="box3">
    <div class="schatten3">
      3.Загнутые уголки
    </div>
</div>

<div class="box4">
    <div class="schatten4">
      4.Тень в перспективе
    </div>
</div>

<div class="box5">
    <div class="schatten5">
      5.Висящая тень
    </div>
</div>

<div class="box6">
    <div class="schatten6">
      6.Приподнятая тень
    </div>
</div>

.box1 {
    position: relative;
    height: 12em;
    width: 31em;
    margin: 0 auto;
    z-index: 1;
}
.schatten1 {
    position: relative;
    color: #777;
    width: 80%;
    height: 80%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3),
                0 0  40px rgba(0, 0, 0, .1) inset;
}

.schatten1:before {
    position: absolute;
    content: "";
    z-index: -2;
    box-shadow: 0 0 15px rgba(0, 0, 0, .6);
    border-radius: 100px / 20px;
}
.schatten1:before {
top: 0; bottom: 0;
left: 10px; right: 10px;
} 


.box2 {
    position: relative;
    height: 12em;
    width: 31em;
    margin: 0 auto;
    z-index: 1;
}
.schatten2 {
    position: relative;
    color: #777;
    width: 80%;
    height: 80%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3),
                0 0  40px rgba(0, 0, 0, .1) inset;
}

.schatten2:before {
    position: absolute;
    content: "";
    z-index: -2;
    box-shadow: 0 0 15px rgba(0, 0, 0, .6);
    border-radius: 100px / 20px;
}
.schatten2:before {
top: 10px; bottom: 10px;
left: 0; right: 0;
} 


.box3 {
    position: relative;
    height: 12em;
    width: 31em;
    margin: 0 auto;
    z-index: 1;
}
.schatten3 {
    position: relative;
    color: #777;
    width: 80%;
    height: 80%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3),
                0 0  40px rgba(0, 0, 0, .1) inset;
}

.schatten3:before,
.schatten3:after {
    position: absolute;
    content: "";
    width: 50%;
    height: 30%;
    bottom: 2px;
    left: 10px;
    box-shadow: 0 15px 10px rgba(0, 0, 0, .6);
    transform: rotate(-3deg);
    z-index: -1;
}

.schatten3:after {
    right: 0;
    left: auto;
    transform: rotate(3deg);
}





.box4 {
    position: relative;
    height: 12em;
    width: 31em;
    margin: 0 auto;
    z-index: 1;
}
.schatten4 {
    position: relative;
    color: #777;
    width: 80%;
    height: 80%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3),
                0 0  40px rgba(0, 0, 0, .1) inset;
}

.schatten4:before {
    position: absolute;
    content: "";
    z-index: -2;
    box-shadow: 0 0 15px rgba(0, 0, 0, .6);
    border-radius: 100px / 20px;
}
.schatten4:before,
.schatten4:after {
    position: absolute;
    content: "";
    z-index: -2;
    bottom: 5px;
    width: 80%;
    height: 3.1em;
}

.schatten4:before {
    left: 50px;
    box-shadow: -80px 0 8px rgba(0, 0, 0, .4);
    transform: skew(45deg);
}

.schatten4:after {
    left: 40px;
    box-shadow: 80px 0 8px rgba(0, 0, 0, .4);
    transform: skew(-45deg);
}

.box5 {
    perspective: 1200px;
    height: 12em;
    width: 31em;
    margin: 0 auto;
}

.schatten5 {
    position: relative;
    color: #777;
    width: 80%;
    height: 9.5em;
    top: 0;
    background: #fff;
    box-shadow: 0   1px  4px rgba(0, 0, 0, .3),
                0 -30px 40px rgba(0, 0, 0, .1) inset;
    transition: 1s ease-in-out;
    transform-style: preserve-3d;
}

.schatten5:after {
    content: "";
    display: block;
    height: 80%;
    width: 75%;
    transform: rotateX(80deg) translate3d(0, 0, -44px);
    box-shadow: 50px 200px 25px 10px rgba(0, 0, 0, .3);
    transition: 1s ease-in-out;
}

.schatten5:hover {
    top: 35px;
    box-shadow: 0 1px  4px rgba(0, 0, 0, .3),
                0 0   40px rgba(0, 0, 0, .1) inset;
}

.schatten5:hover:after {
    transform: rotateX(94deg) translate3d(0, 0, -70px);
    box-shadow: 50px 200px 25px 10px rgba(0, 0, 0, .4);
}



.box6 {
    position: relative;
    height: 12em;
    width: 31em;
    margin: 0 auto;
    z-index: 1;
}
.schatten6 {
    position: relative;
    color: #777;
    width: 80%;
    height: 80%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3),
                0 0  40px rgba(0, 0, 0, .1) inset;
}

.schatten6:before {
    position: absolute;
    content: "";
    z-index: -2;
    box-shadow: 0 0 15px rgba(0, 0, 0, .6);
    border-radius: 100px / 20px;
}
.schatten6 {
    top: 0;
    box-shadow: 0  25px 10px -10px rgba(0, 0, 0, .6),
                0   1px  4px       rgba(0, 0, 0, .3),
                0 -30px 40px       rgba(0, 0, 0, .1) inset;
}

.schatten6:hover {
    top: 15px;
    box-shadow: 0  10px 10px -10px rgba(0, 0, 0, .6),
                0   1px  4px       rgba(0, 0, 0, .3),
                0   0   40px       rgba(0, 0, 0, .1) inset;
}