CSS тень для блока (объекта) box-shadow


Здесь размещены демо-примеры теней для блока (объекта) с использованием свойства box-shadow. Страница разделена на разделы: тень со всех сторон; тень с одной стороны; тень с двух сторон; тень с трех сторон; внутренняя тень.
 
Box-shadow со всех сторон

Тень со всех сторон (Box Shadow On All Sides):
-webkit-box-shadow: 0 0 10px #9E9E9E;
-moz-box-shadow: 0 0 10px #9E9E9E;
box-shadow: 0 0 10px #9E9E9E;
Внутренняя тень (Box Shadow Inner):
-webkit-box-shadow: inset 0 0 10px #9E9E9E;
-moz-box-shadow: inset 0 0 10px #9E9E9E;
box-shadow: inset 0 0 10px #9E9E9E;
Тень по периметру png изображения (Drop Shadow):
-webkit-filter: drop-shadow(3px 5px 5px #9E9E9E);
filter: drop-shadow(3px 5px 5px #9E9E9E);
 
Box-shadow с одной стороны

Тень слева (Box Shadow Left):
-webkit-box-shadow: -5px 0 10px -5px #9E9E9E;
-moz-box-shadow: -5px 0 10px -5px #9E9E9E;
box-shadow: -5px 0 10px -5px #9E9E9E;
Тень сверху (Box Shadow Top):
-webkit-box-shadow: 0 -5px 10px -5px #9E9E9E;
-moz-box-shadow: 0 -5px 10px -5px #9E9E9E;
box-shadow: 0 -5px 10px -5px #9E9E9E;
Тень справа (Box Shadow Right):
-webkit-box-shadow: 5px 0 10px -5px #9E9E9E;
-moz-box-shadow: 5px 0 10px -5px #9E9E9E;
box-shadow: 5px 0 10px -5px #9E9E9E;
Тень снизу (Box Shadow Bottom):
-webkit-box-shadow: 0 5px 10px -5px #9E9E9E;
-moz-box-shadow: 0 5px 10px -5px #9E9E9E;
box-shadow: 0 5px 10px -5px #9E9E9E;
 
Box-shadow с двух сторон

Тень слева и справа (Box Shadow Left Right):
box-shadow:
5px 0 7px -4px #9E9E9E, -5px 0 7px -4px #9E9E9E;
Тень сверху и снизу (Box Shadow Top Bottom):
box-shadow:
0 5px 7px -4px #9E9E9E, 0 -5px 7px -4px #9E9E9E;
Тень слева и сверху (Box Shadow Left Top):
-webkit-box-shadow: -3px -3px 5px #C0C0C0;
-moz-box-shadow: -3px -3px 5px #C0C0C0;
box-shadow: -3px -3px 5px #C0C0C0;
Тень справа и сверху (Box Shadow Right Top):
-webkit-box-shadow: 3px -3px 5px #C0C0C0;
-moz-box-shadow: 3px -3px 5px #C0C0C0;
box-shadow: 3px -3px 5px #C0C0C0;
Тень слева и снизу (Box Shadow Left Bottom):
-webkit-box-shadow: -3px 3px 5px #C0C0C0;
-moz-box-shadow: -3px 3px 5px #C0C0C0;
box-shadow: -3px 3px 5px #C0C0C0;
Тень справа и снизу (Box Shadow Right Bottom):
-webkit-box-shadow: 3px 3px  5px #C0C0C0;
-moz-box-shadow: 3px 3px  5px #C0C0C0;
box-shadow: 3px 3px  5px #C0C0C0;
 
Box-shadow с трех сторон

Тень слева, справа и сверху (Box Shadow Left Right Top):
-webkit-box-shadow: 0 -5px 10px #9E9E9E;
-moz-box-shadow: 0 -5px 10px #9E9E9E;
box-shadow: 0 -5px 10px #9E9E9E;
Тень сверху, снизу и справа (Box Shadow Top Bottom Right):
-webkit-box-shadow: 5px 0 10px #9E9E9E;
-moz-box-shadow: 5px 0 10px #9E9E9E;
box-shadow: 5px 0 10px #9E9E9E;
Тень слева, справа и снизу (Box Shadow Left Right Bottom):
-webkit-box-shadow: 0 5px 10px #9E9E9E;
-moz-box-shadow: 0 5px 10px #9E9E9E;
box-shadow: 0 5px 10px #9E9E9E;
Тень сверху, снизу и слева (Box Shadow Top Bottom Left):
-webkit-box-shadow: -5px 0 10px #9E9E9E;
-moz-box-shadow: -5px 0 10px #9E9E9E;
box-shadow: -5px 0 10px #9E9E9E;
 
Box-shadow внутренняя тень

Внутренняя тень слева и снизу:
-webkit-box-shadow: inset 5px -5px 15px #C0C0C0;
-moz-box-shadow: inset 5px -5px 15px #C0C0C0;
box-shadow: inset 5px -5px 15px #C0C0C0;
Внутренняя тень слева и сверху:
-webkit-box-shadow: inset 5px 5px 15px #C0C0C0;
-moz-box-shadow: inset 5px 5px 15px #C0C0C0;
box-shadow: inset 5px 5px 15px #C0C0C0;
Внутренняя тень справа и снизу:
-webkit-box-shadow: inset -5px -5px 15px #C0C0C0;
-moz-box-shadow: inset -5px -5px 15px #C0C0C0;
box-shadow: inset -5px -5px 15px #C0C0C0;
Внутренняя тень справа и сверху:
-webkit-box-shadow: inset -5px 5px 15px #C0C0C0;
-moz-box-shadow: inset -5px 5px 15px #C0C0C0;
box-shadow: inset -5px 5px 15px #C0C0C0;
Внутренняя тень сверху и снизу:
box-shadow:
inset 0 15px 15px -10px #C0C0C0,
inset 0 -15px 15px -10px #C0C0C0;
Внутренняя тень слева:
-webkit-box-shadow: inset 15px 0 15px -10px #C0C0C0;
-moz-box-shadow: inset 15px 0 15px -10px #C0C0C0;
box-shadow: inset 15px 0 15px -10px #C0C0C0;
Внутренняя тень сверху:
-webkit-box-shadow: inset 0 15px 15px -10px #C0C0C0;
-moz-box-shadow: inset 0 15px 15px -10px #C0C0C0;
box-shadow: inset 0 15px 15px -10px #C0C0C0;
Внутренняя тень справа:
-webkit-box-shadow: inset -15px 0 15px -10px #C0C0C0;
-moz-box-shadow: inset -15px 0 15px -10px #C0C0C0;
box-shadow: inset -15px 0 15px -10px #C0C0C0;
Внутренняя тень снизу:
-webkit-box-shadow: inset 0 -15px 15px -10px #C0C0C0;
-moz-box-shadow: inset 0 -15px 15px -10px #C0C0C0;
box-shadow: inset 0 -15px 15px -10px #C0C0C0;