Box Shadow CSS3

Tень блока

box-shadow: 20px -15px 10px 5px rgba(0, 0, 0, .2);

Лёгкая тень

box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
box-shadow: 0 0 10px 5px rgba(221, 221, 221, 1);

Тень снизу

box-shadow: 0 5px 5px -5px rgba(0, 0, 0, .2);

Тень сверху

box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, .2);

Тень слева

box-shadow: -5px 0 5px -5px rgba(0, 0, 0, .2);

Тень справа

box-shadow: 5px 0 5px -5px rgba(0, 0, 0, .2);

По бокам (справа и слева)

box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) inset;

Многослойный блок

box-shadow: 6px 6px #989898, 12px 12px #6c6666;
box-shadow: 0 0 0 1px silver, 0 -20px 0 -10px coral, 20px 0 0 -10px darkturquoise, 0 20px 0 -10px gold, -20px 0 0 -10px chartreuse;
box-shadow: 0 0 0 1px rgb(194, 192, 184) inset, 0 5px 0 -4px rgb(255, 255, 255), 0 5px 0 -3px rgb(194, 192, 184), 0 11px 0 -8px rgb(255, 255, 255), 0 11px 0 -7px rgb(194, 192, 184), 0 17px 0 -12px rgb(255, 255, 255), 0 17px 0 -11px rgb(194, 192, 184);

Разноцветная рамка

box-shadow: -15px -15px 2px -5px rgba(123,51,90,.5), -15px 15px 2px -5px rgba(60,74,123,.5), 15px -15px 2px -5px rgba(255,0,0,.5), 15px 15px 2px -5px rgba(60,123,68,.5);
border: 3px dashed #ccc; box-shadow: 0 0 0 1px #ccc, inset 0 0 0 1px #ccc;

Уголки

box-shadow: -20px 20px 0 -17px #eee, 20px -20px 0 -17px #eee, 20px 20px 0 -20px #592385, 0 0 0 2px #592385;

Внутренняя тень

box-shadow: 0 0 40px rgba(0, 0, 0, .2) inset;

Вдавленный элемент

box-shadow: 0 3px 3px #575555 inset;
box-shadow: inset 0 0 100px hsla(0,0%,0%,.2), inset 0px 1px 5px #999, inset 0px 2px 0px #888, inset 0px 3px 0px #777, inset 0px 4px 0px #666, inset 0px 5px 0px #555, inset 0px 6px 0px #444, inset 0px 7px 0px #333, inset 0px 8px 7px #001135;

Выпуклый элемент

box-shadow: 20px 0 20px -20px #000 inset, -20px 0 20px -20px #000 inset;
border-radius: 10px; background: rgb(100,100,100) radial-gradient(circle at 50% 0, rgba(255,255,255,.65), rgba(255,255,255,.35)); box-shadow: inset rgba(0,0,0,.6) 0 -3px 8px, inset rgba(252,255,255,.7) 0 3px 8px, rgba(0,0,0,.8) 0 3px 8px -3px;

Bоx-Shadow + input HTML

Bоx-Shadow + transition или animation

Плоская тень с одной стороны

Внутренняя тень