Box-Shadow CSS3: тень блока (примеры)

Тень блока

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

Лёгкая тень

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

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

Тень снизу

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 green;

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

HTML

		
<div class="form-group field-contactform-name required has-error">			
<input type="text" id="name" class="form-control backlight" name="name">
</div>

CSS

		
input.backlight{
display: block;
width: 100%;
max-width: 300px;
box-sizing: border-box;
margin: 0 auto 10px;
padding: 10px;
border: 1px solid #000;
border-radius: 4px;
box-shadow: inset 0 2px 10px 1px rgba(0,0,0,.3), inset 0 0 0 60px rgba(0,0,0,.3), 0 1px rgba(255,255,255,.08);  
color: #ccc;
transition: .5s linear;
}
.backlight:focus {
outline: none;
box-shadow: inset 0 1px 3px 1px  rgba(0,0,0,.5), inset 0 0 0 60px rgba(0,0,0,0), 0 1px rgba(255,255,255,.08);
}

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

HTML

<p class="example-shadow-1"><a href="#btn">Flat Button</a></p>

CSS

.example-shadow-1 {  
text-align: center;
}
.example-shadow-1 a {
display: inline-block;
border-radius: 5px;
padding: 15px 35px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: white;
background: #55acee;
box-shadow: 0 5px 0 #3C93D5;
transition: .3s;
}
.example-shadow-1 a:hover {
background: #6FC6FF;
}

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

HTML

<p class="example-shadow-2"><span></span></p>

CSS

.example-shadow-2 {
background: #e6e3df;
text-align: center;
}
.example-shadow-2 span {
margin: 50px;
height: 100px;
width: 200px;
display: inline-block;
box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1);
}