BOX-SHADOW

box-shadow:{h-shadow} {v-shadow} {blur} {spread} {color} {inset}/none
Property Description
h-shadow 그림자의 수평(X)축 거리를 나타냅니다.
v-shadow 그림자의 수평(Y)축 거리를 나타냅니다
blur 그림자의 흐림정도를 나타냅니다
spread 그림자의 거리를 나타냅니다
color 그림자의 색을 나타냅니다.
insert 그림자의 요소 내부를 나타냅니다.
shadow1
shadow2
shadow3
shadow4
shadow5
shadow6
shadow7
shadow8
shadow9
shadow10
.block {width: 140px; height: 140px; margin: 40px; font-size: 18px; line-height: 140px; color: #fff; cursor: pointer; text-align: center; float: left;}    
.block.sha1 {background-color: #ff9100;}
.block.sha1>div {transition: all 0.3s ease-in-out;}
.block.sha1>div:hover {box-shadow: none;}
.shadow1 {box-shadow: 0px 0px 5px rgba(0,0,0,0.5);}
.shadow2 {box-shadow: 2px 2px 5px rgba(0,0,0,0.5);}
.shadow3 {box-shadow: 4px 4px 5px rgba(0,0,0,0.5);}
.shadow4 {box-shadow: 6px 6px 5px rgba(0,0,0,0.5);}
.shadow5 {box-shadow: 8px 8px 5px rgba(0,0,0,0.5);}
.shadow6 {box-shadow: 10px 10px 5px rgba(0,0,0,0.5);}
.shadow7 {box-shadow: 12px 12px 5px rgba(0,0,0,0.5);}
.shadow8 {box-shadow: 14px 14px 5px rgba(0,0,0,0.5);}
.shadow9 {box-shadow: 16px 18px 5px rgba(0,0,0,0.5);}
.shadow10 {box-shadow: 18px 18px 5px rgba(0,0,0,0.5);}
<div class="well clearfix">
    <div class="black sha1">
        <div class="shadow01">shadow01</div>
    </div>
    <div class="black sha1">
        <div class="shadow02">shadow02</div>
    </div>
    <div class="black sha1">
        <div class="shadow03">shadow03</div>
    </div>
    <div class="black sha1">
        <div class="shadow04">shadow04</div>
    </div>
    <div class="black sha1">
        <div class="shadow05">shadow05</div>
    </div>
    <div class="black sha1">
        <div class="shadow06">shadow06</div>
    </div>
    <div class="black sha1">
        <div class="shadow07">shadow07</div>
    </div>
    <div class="black sha1">
        <div class="shadow08">shadow08</div>
    </div>
    <div class="black sha1">
        <div class="shadow09">shadow09</div>
    </div>
    <div class="black sha1">
        <div class="shadow10">shadow10</div>
    </div>
    <div class="black sha1">
        <div class="shadow11">shadow11</div>
    </div>
    <div class="black sha1">
        <div class="shadow12">shadow12</div>
    </div>
    <div class="black sha1">
        <div class="shadow13">shadow13</div>
    </div>
    <div class="black sha1">
        <div class="shadow14">shadow14</div>
    </div>
    <div class="black sha1">
        <div class="shadow15">shadow15</div>
    </div>
</div>
shadow11
shadow12
shadow13
shadow14
shadow15
shadow16
shadow17
shadow18
shadow19
shadow20
.block.sha2 {background-color: #ce93d8;}
.block.sha2>div{transition: all 0.3s ease-in-out;}
.block.sha2>div:hover {box-shadow: none;}
.shadow11 {box-shadow: 4px 4px 0px rgba(0,0,0,0.8)}
.shadow12 {box-shadow: 4px 4px 3px rgba(0,0,0,0.8)}
.shadow13 {box-shadow: 4px 4px 6px rgba(0,0,0,0.8)}
.shadow14 {box-shadow: 4px 4px 9px rgba(0,0,0,0.8)}
.shadow15 {box-shadow: 4px 4px 12px rgba(0,0,0,0.8)}
.shadow16 {box-shadow: 4px 4px 15px rgba(0,0,0,0.8)}
.shadow17 {box-shadow: 4px 4px 18px rgba(0,0,0,0.8)}
.shadow18 {box-shadow: 4px 4px 21px rgba(0,0,0,0.8)}
.shadow19 {box-shadow: 4px 4px 24px rgba(0,0,0,0.8)}
.shadow20 {
     animation-name: shadow20;
    animation-duration:1s;
    animation-iteration-count: 100;
    animation-timing-function: ease-in-out;
}
@keyframes shadow20 {
     0% {box-shadow:  0px 0px 0px rgba(0,0,0,0);}
    50% {box-shadow:  4px 4px 24px rgba(0,0,0,0.8);}
    100% {box-shadow:  0px 0px 0px rgba(0,0,0,0);}
}
<div class="well clearfix">
    <div class="black sha1">
        <div class="shadow01">shadow01</div>
    </div>
    <div class="black sha1">
        <div class="shadow02">shadow02</div>
    </div>
    <div class="black sha1">
        <div class="shadow03">shadow03</div>
    </div>
    <div class="black sha1">
        <div class="shadow04">shadow04</div>
    </div>
    <div class="black sha1">
        <div class="shadow05">shadow05</div>
    </div>
    <div class="black sha1">
        <div class="shadow06">shadow06</div>
    </div>
    <div class="black sha1">
        <div class="shadow07">shadow07</div>
    </div>
    <div class="black sha1">
        <div class="shadow08">shadow08</div>
    </div>
    <div class="black sha1">
        <div class="shadow09">shadow09</div>
    </div>
    <div class="black sha1">
        <div class="shadow10">shadow10</div>
    </div>
    <div class="black sha1">
        <div class="shadow11">shadow11</div>
    </div>
    <div class="black sha1">
        <div class="shadow12">shadow12</div>
    </div>
    <div class="black sha1">
        <div class="shadow13">shadow13</div>
    </div>
    <div class="black sha1">
        <div class="shadow14">shadow14</div>
    </div>
    <div class="black sha1">
        <div class="shadow15">shadow15</div>
    </div>
</div>
shadow21
shadow22
shadow23
shadow24
shadow25
shadow26
shadow27
shadow28
shadow29
shadow30
.block.sha3 {background-color: #90caf9;}
.block.sha3>div{transition: all 0.3s ease-in-out;}
.block.sha3>div:hover {box-shadow: none;}
.shadow21 {box-shadow: 10px 10px 0px 5px rgba(0,0,0,0.8)}
.shadow22 {box-shadow: 12px 12px 0px 5px rgba(0,0,0,0.8)}
.shadow23 {box-shadow: 14px 14px 0px 5px rgba(0,0,0,0.8)}
.shadow24 {box-shadow: 16px 16px 0px 5px rgba(0,0,0,0.8)}
.shadow25 {box-shadow: 18px 18px 0px 5px rgba(0,0,0,0.8)}
.shadow26 {box-shadow: -10px -10px 0px 5px rgba(0,0,0,0.8)}
.shadow27 {box-shadow: -12px -12px 0px 5px rgba(0,0,0,0.8)}
.shadow28 {box-shadow: -14px -14px 0px 5px rgba(0,0,0,0.8)}
.shadow29 {box-shadow: -16px -16px 0px 5px rgba(0,0,0,0.8)}
.shadow30 {
animation-name: shadow30;
animation-duration:1s;
animation-iteration-count: 100;
animation-timing-function: ease-in-out;
}
@keyframes shadow30 {
0% {box-shadow: -18px -18px 0px 5px rgba(0,0,0,0);}
50% {box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.8);}
100% {box-shadow: 18px 18px 0px 5px rgba(0,0,0,0);}
}
<div class="well clearfix">
    <div class="black sha1">
        <div class="shadow01">shadow01</div>
    </div>
    <div class="black sha1">
        <div class="shadow02">shadow02</div>
    </div>
    <div class="black sha1">
        <div class="shadow03">shadow03</div>
    </div>
    <div class="black sha1">
        <div class="shadow04">shadow04</div>
    </div>
    <div class="black sha1">
        <div class="shadow05">shadow05</div>
    </div>
    <div class="black sha1">
        <div class="shadow06">shadow06</div>
    </div>
    <div class="black sha1">
        <div class="shadow07">shadow07</div>
    </div>
    <div class="black sha1">
        <div class="shadow08">shadow08</div>
    </div>
    <div class="black sha1">
        <div class="shadow09">shadow09</div>
    </div>
    <div class="black sha1">
        <div class="shadow10">shadow10</div>
    </div>
    <div class="black sha1">
        <div class="shadow11">shadow11</div>
    </div>
    <div class="black sha1">
        <div class="shadow12">shadow12</div>
    </div>
    <div class="black sha1">
        <div class="shadow13">shadow13</div>
    </div>
    <div class="black sha1">
        <div class="shadow14">shadow14</div>
    </div>
    <div class="black sha1">
        <div class="shadow15">shadow15</div>
    </div>
</div>
shadow31
shadow32
shadow33
shadow34
shadow35
shadow36
shadow37
shadow38
shadow39
shadow40
.block.sha4 {background-color: #81c784;}
.block.sha4>div{transition: all 0.3s ease-in-out;}
.block.sha4>div:hover {box-shadow: none;}
.shadow31 {box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.8)}
.shadow32 {box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.8)}
.shadow33 {box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.8)}
.shadow34 {box-shadow: 0px 0px 0px 7px rgba(0,0,0,0.8)}
.shadow35 {box-shadow: 0px 0px 0px 9px rgba(0,0,0,0.8)}
.shadow36 {box-shadow: 0px 0px 0px 11px rgba(0,0,0,0.8)}
.shadow37 {box-shadow: 0px 0px 0px 13px rgba(0,0,0,0.8)}
.shadow38 {box-shadow: 0px 0px 0px 15px rgba(0,0,0,0.8)}
.shadow39 {box-shadow: 0px 0px 0px 17px rgba(0,0,0,0.8)}
.shadow40 {
     animation-name: shadow40;
    animation-duration:1s;
    animation-iteration-count: 100;
    animation-timing-function: ease-in-out;
}
@keyframes shadow30 {
     0% {box-shadow: 0px 0px 0px  0px rgba(0,0,0,0);}
    50% {box-shadow: 0px 0px 0px 20px rgba(0,0,0,0.8);}
    100% {box-shadow: 0px 0px 0px  0px rgba(0,0,0,0);}
}
<div class="well clearfix">
    <div class="black sha1">
        <div class="shadow01">shadow01</div>
    </div>
    <div class="black sha1">
        <div class="shadow02">shadow02</div>
    </div>
    <div class="black sha1">
        <div class="shadow03">shadow03</div>
    </div>
    <div class="black sha1">
        <div class="shadow04">shadow04</div>
    </div>
    <div class="black sha1">
        <div class="shadow05">shadow05</div>
    </div>
    <div class="black sha1">
        <div class="shadow06">shadow06</div>
    </div>
    <div class="black sha1">
        <div class="shadow07">shadow07</div>
    </div>
    <div class="black sha1">
        <div class="shadow08">shadow08</div>
    </div>
    <div class="black sha1">
        <div class="shadow09">shadow09</div>
    </div>
    <div class="black sha1">
        <div class="shadow10">shadow10</div>
    </div>
    <div class="black sha1">
        <div class="shadow11">shadow11</div>
    </div>
    <div class="black sha1">
        <div class="shadow12">shadow12</div>
    </div>
    <div class="black sha1">
        <div class="shadow13">shadow13</div>
    </div>
    <div class="black sha1">
        <div class="shadow14">shadow14</div>
    </div>
    <div class="black sha1">
        <div class="shadow15">shadow15</div>
    </div>
</div>
shadow41
shadow42
shadow43
shadow44
shadow45
shadow46
shadow47
shadow48
shadow49
shadow50
.block.sha5 {background-color: orange;}
.block.sha5>div{transition: all 0.3s ease-in-out;}
.block.sha5>div:hover {box-shadow: none;}
.shadow41 {box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.5)}
.shadow42 {box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.5)}
.shadow43 {box-shadow: 0px 0px 3px 5px rgba(0,0,0,0.5)}
.shadow44 {box-shadow: 0px 0px 3px 7px rgba(0,0,0,0.5)}
.shadow45 {box-shadow: 0px 0px 3px 9px rgba(0,0,0,0.5)}
.shadow46 {box-shadow: 0px 0px 3px 11px rgba(0,0,0,0.5)}
.shadow47 {box-shadow: 0px 0px 3px 13px rgba(0,0,0,0.5)}
.shadow48 {box-shadow: 0px 0px 3px 15px rgba(0,0,0,0.5)}
.shadow49 {box-shadow: 0px 0px 3px 17px rgba(0,0,0,0.5)}
.shadow50 {
     animation-name: shadow50;
    animation-duration:1s;
    animation-iteration-count: 100;
    animation-timing-function: ease-in-out;
}
@keyframes shadow50 {
     0% {box-shadow: 0px 0px 0px  0px rgba(0,0,0,0);}
    50% {box-shadow: 0px 0px 0px 20px rgba(0,0,0,0.8);}
    100% {box-shadow: 0px 0px 0px  0px rgba(0,0,0,0);}
}
<div class="well clearfix">
    <div class="black sha1">
        <div class="shadow01">shadow01</div>
    </div>
    <div class="black sha1">
        <div class="shadow02">shadow02</div>
    </div>
    <div class="black sha1">
        <div class="shadow03">shadow03</div>
    </div>
    <div class="black sha1">
        <div class="shadow04">shadow04</div>
    </div>
    <div class="black sha1">
        <div class="shadow05">shadow05</div>
    </div>
    <div class="black sha1">
        <div class="shadow06">shadow06</div>
    </div>
    <div class="black sha1">
        <div class="shadow07">shadow07</div>
    </div>
    <div class="black sha1">
        <div class="shadow08">shadow08</div>
    </div>
    <div class="black sha1">
        <div class="shadow09">shadow09</div>
    </div>
    <div class="black sha1">
        <div class="shadow10">shadow10</div>
    </div>
    <div class="black sha1">
        <div class="shadow11">shadow11</div>
    </div>
    <div class="black sha1">
        <div class="shadow12">shadow12</div>
    </div>
    <div class="black sha1">
        <div class="shadow13">shadow13</div>
    </div>
    <div class="black sha1">
        <div class="shadow14">shadow14</div>
    </div>
    <div class="black sha1">
        <div class="shadow15">shadow15</div>
    </div>
</div>
shadow51
shadow52
shadow53
shadow54
shadow55
shadow56
shadow57
shadow58
shadow59
shadow60
.block.sha6 {background-color: #ff8a65;}
.block.sha6 > div {transition: all 0.3s ease-in-out}
.block.sha6 > div:hover {box-shadow:  none;}
.shadow51 {box-shadow:  0px 0px 5px -3px rgba(0,0,0,0.8);}
.shadow52 {box-shadow:  0px 2px 5px -3px rgba(0,0,0,0.8);}
.shadow53 {box-shadow:  0px 4px 5px -3px rgba(0,0,0,0.8);}
.shadow54 {box-shadow:  0px 6px 5px -3px rgba(0,0,0,0.8);}
.shadow55 {box-shadow:  0px 8px 5px -3px rgba(0,0,0,0.8);}
.shadow56 {box-shadow:  0px 10px 5px -3px rgba(0,0,0,0.8);}
.shadow57 {box-shadow:  0px 12px 5px -3px rgba(0,0,0,0.8);}
.shadow58 {box-shadow:  0px 14px 5px -3px rgba(0,0,0,0.8);}
.shadow59 {box-shadow:  0px 16px 5px -3px rgba(0,0,0,0.8);}
.shadow60{
    animation-name: shadow60;
    animation-duration: 1s;
    animation-iteration-count: 100;
    animation-timing-function: ease-in-out;
}
 @keyframes shadow60 {
    0% {box-shadow:  0px 0px 0px rgba(0,0,0,0);}
    50% {box-shadow:  0px 20px 5px -3px rgba(0,0,0,0.8);}
    100% {box-shadow:  0px 0px 0px rgba(0,0,0,0);}
  }
<div class="well clearfix">
    <div class="black sha1">
        <div class="shadow01">shadow01</div>
    </div>
    <div class="black sha1">
        <div class="shadow02">shadow02</div>
    </div>
    <div class="black sha1">
        <div class="shadow03">shadow03</div>
    </div>
    <div class="black sha1">
        <div class="shadow04">shadow04</div>
    </div>
    <div class="black sha1">
        <div class="shadow05">shadow05</div>
    </div>
    <div class="black sha1">
        <div class="shadow06">shadow06</div>
    </div>
    <div class="black sha1">
        <div class="shadow07">shadow07</div>
    </div>
    <div class="black sha1">
        <div class="shadow08">shadow08</div>
    </div>
    <div class="black sha1">
        <div class="shadow09">shadow09</div>
    </div>
    <div class="black sha1">
        <div class="shadow10">shadow10</div>
    </div>
    <div class="black sha1">
        <div class="shadow11">shadow11</div>
    </div>
    <div class="black sha1">
        <div class="shadow12">shadow12</div>
    </div>
    <div class="black sha1">
        <div class="shadow13">shadow13</div>
    </div>
    <div class="black sha1">
        <div class="shadow14">shadow14</div>
    </div>
    <div class="black sha1">
        <div class="shadow15">shadow15</div>
    </div>
</div>
shadow61
shadow62
shadow63
shadow64
shadow65
shadow66
shadow67
shadow68
shadow69
shadow70
 
.block.sha7 {background-color: lightpink;}
.block.sha7 > div {transition: all 0.3s ease-in-out}
.block.sha7 > div:hover {box-shadow:  none;}
.shadow61 {box-shadow:  0px 0px 5px 1px rgba(0,0,0,0.8) inset;}
.shadow62 {box-shadow:  0px 0px 6px 2px rgba(0,0,0,0.8) inset;}
.shadow63 {box-shadow:  0px 0px 7px 3px rgba(0,0,0,0.8) inset;}
.shadow64 {box-shadow:  0px 0px 8px 4px rgba(0,0,0,0.8) inset;}
.shadow65 {box-shadow:  0px 0px 9px 5px rgba(0,0,0,0.8) inset;}
.shadow66 {box-shadow:  0px 0px 10px 6px rgba(0,0,0,0.8) inset;}
.shadow67 {box-shadow:  0px 0px 11px 7px rgba(0,0,0,0.8) inset;}
.shadow68 {box-shadow:  0px 0px 12px 8px rgba(0,0,0,0.8) inset;}
.shadow69 {box-shadow:  0px 0px 13px 9px rgba(0,0,0,0.8) inset;}
.shadow70 {box-shadow:  0px 0px 14px 10px rgba(0,0,0,0.8) inset;}
    animation-name: shadow70;
    animation-duration: 1s;
    animation-iteration-count: 100;
    animation-timing-function: ease-in-out;
}
 @keyframes shadow70 {
    0% {box-shadow:  0px 0px 0px 0px rgba(0,0,0,0)inset;}
    50% {box-shadow:  0px 0px 14px 10px  rgba(0,0,0,0.8)inset;}
    100% {box-shadow:  0px 0px 0px 0px rgba(0,0,0,0)inset;}
  }
<div class="well clearfix">
    <div class="black sha1">
        <div class="shadow01">shadow01</div>
    </div>
    <div class="black sha1">
        <div class="shadow02">shadow02</div>
    </div>
    <div class="black sha1">
        <div class="shadow03">shadow03</div>
    </div>
    <div class="black sha1">
        <div class="shadow04">shadow04</div>
    </div>
    <div class="black sha1">
        <div class="shadow05">shadow05</div>
    </div>
    <div class="black sha1">
        <div class="shadow06">shadow06</div>
    </div>
    <div class="black sha1">
        <div class="shadow07">shadow07</div>
    </div>
    <div class="black sha1">
        <div class="shadow08">shadow08</div>
    </div>
    <div class="black sha1">
        <div class="shadow09">shadow09</div>
    </div>
    <div class="black sha1">
        <div class="shadow10">shadow10</div>
    </div>
    <div class="black sha1">
        <div class="shadow11">shadow11</div>
    </div>
    <div class="black sha1">
        <div class="shadow12">shadow12</div>
    </div>
    <div class="black sha1">
        <div class="shadow13">shadow13</div>
    </div>
    <div class="black sha1">
        <div class="shadow14">shadow14</div>
    </div>
    <div class="black sha1">
        <div class="shadow15">shadow15</div>
    </div>
</div>
sample1
sample2
sample3
sample4
sample5
sample6
sample7
sample8
sample9
sample10

See the Pen GlowSpin by Dan Peddle (@dazld) on CodePen.

See the Pen Dark Ui elements by Pfalzgraf Gyula (@wallas) on CodePen.

See the Pen CSS BUTTONS!! by Derek Morash (@derekmorash) on CodePen.

See the Pen Basic Calculator Developed With Html5,CSS3 & JavaScript by Mawuli Kufogbe (@ckm100) on CodePen.

See the Pen Sass flat-button generator by Max Kohler (@maxakohler) on CodePen.