BOX-SHADOW

box-shadow: {h-shadow} {v:shadow} {blur} {spread} {color} {inset} / none

Property	Description
h-shadow	그림자의 수평(X)축 거리를 나타냅니다.
v:shadow	그림자의 수평(Y)축 거리를 나타냅니다.
blur	그림자의 흐림정도를 나타냅니다.
spread	그림자의 거리를 나타냅니다.
color	그림자의 색을 나타냅니다.
inset	그림자의 요소 내부를 나타냅니다.

shadow1

shadow2

shadow3

shadow4

shadow5

shadow6

shadow7

shadow8

shadow9

shadow10

CSS
HTML

.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.8);}
.shadow2 {box-shadow: 2px 2px 5px rgba(0,0,0,0.8);}
.shadow3 {box-shadow: 4px 4px 5px rgba(0,0,0,0.8);}
.shadow4 {box-shadow: 6px 6px 5px rgba(0,0,0,0.8);}
.shadow5 {box-shadow: 8px 8px 5px rgba(0,0,0,0.8);}
.shadow6 {box-shadow: 10px 10px 5px rgba(0,0,0,0.8);}
.shadow7 {box-shadow: 12px 12px 5px rgba(0,0,0,0.8);}
.shadow8 {box-shadow: 14px 14px 5px rgba(0,0,0,0.8);}
.shadow9 {box-shadow: 16px 16px 5px rgba(0,0,0,0.8);}
.shadow10 {

animation-name:  shadow10;
animation-duration: 1s;
animation-iteration-count :100;
animation-timing-function: ease-in-out;
}
@keyframes shadow10 {
0% {box-shadow:  0px 0px 0px rgba(0,0,0,0);}
	50% {box-shadow:  16px 16px 5px rgba(0,0,0,0.8);}
100% {box-shadow:  0px 0px 0px rgba(0,0,0,0);}

}

				
<div class="well clearfix">
  <div class="block sha1">
    <div class="shadow1">shadow1</div>
  </div>
  <div class="block sha1">
    <div class="shadow2">shadow2</div>
  </div>
  <div class="block sha1">
    <div class="shadow3">shadow3</div>
  </div>
  <div class="block sha1">
    <div class="shadow4">shadow4</div>
  </div>
  <div class="block sha1">
    <div class="shadow5">shadow5</div>
  </div>
  <div class="block sha1">
    <div class="shadow6">shadow6</div>
  </div>
  <div class="block sha1">
    <div class="shadow7">shadow7</div>
  </div>
  <div class="block sha1">
    <div class="shadow8">shadow8</div>
  </div>
  <div class="block sha1">
    <div class="shadow9">shadow9</div>
  </div>
  <div class="block sha1">
    <div class="shadow10">shadow10</div>
  </div>
  </div>

shadow11

shadow12

shadow13

shadow14

shadow15

shadow16

shadow17

shadow18

shadow19

shadow20

CSS
HTML

.block.sha2 { background-color: #ff9100; }
.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="block sha1">
    <div class="shadow11">shadow1</div>
  </div>
  <div class="block sha1">
    <div class="shadow12">shadow2</div>
  </div>
  <div class="block sha1">
    <div class="shadow13">shadow3</div>
  </div>
  <div class="block sha1">
    <div class="shadow14">shadow4</div>
  </div>
  <div class="block sha1">
    <div class="shadow15">shadow5</div>
  </div>
  <div class="block sha1">
    <div class="shadow16">shadow6</div>
  </div>
  <div class="block sha1">
    <div class="shadow17">shadow7</div>
  </div>
  <div class="block sha1">
    <div class="shadow18">shadow8</div>
  </div>
  <div class="block sha1">
    <div class="shadow19">shadow9</div>
  </div>
  <div class="block sha1">
    <div class="shadow20">shadow10</div>
  </div>
  </div>

shadow21

shadow22

shadow23

shadow24

shadow25

shadow26

shadow27

shadow28

shadow29

shadow30

CSS
HTML

.block.sha3 { background-color: #b2dfdb; }
.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 {box-shadow: -18px -18px 0px 5px rgba(0,0,0,0.8);}

				
<div class="well clearfix">
  <div class="block sha1">
    <div class="shadow21">shadow1</div>
  </div>
  <div class="block sha1">
    <div class="shadow22">shadow2</div>
  </div>
  <div class="block sha1">
    <div class="shadow23">shadow3</div>
  </div>
  <div class="block sha1">
    <div class="shadow24">shadow4</div>
  </div>
  <div class="block sha1">
    <div class="shadow25">shadow5</div>
  </div>
  <div class="block sha1">
    <div class="shadow26">shadow6</div>
  </div>
  <div class="block sha1">
    <div class="shadow27">shadow7</div>
  </div>
  <div class="block sha1">
    <div class="shadow28">shadow8</div>
  </div>
  <div class="block sha1">
    <div class="shadow29">shadow9</div>
  </div>
  <div class="block sha1">
    <div class="shadow30">shadow10</div>
  </div>
  </div>

shadow31

shadow32

shadow33

shadow34

shadow35

shadow36

shadow37

shadow38

shadow39

shadow40

CSS
HTML

.block.sha4 { background-color: #ef9a9a; }
.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 shadow40 {
0% {box-shadow:  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 rgba(0,0,0,0);}

					}

				
<div class="well clearfix">
  <div class="block sha1">
    <div class="shadow31">shadow1</div>
  </div>
  <div class="block sha1">
    <div class="shadow32">shadow2</div>
  </div>
  <div class="block sha1">
    <div class="shadow33">shadow3</div>
  </div>
  <div class="block sha1">
    <div class="shadow34">shadow4</div>
  </div>
  <div class="block sha1">
    <div class="shadow35">shadow5</div>
  </div>
  <div class="block sha1">
    <div class="shadow36">shadow6</div>
  </div>
  <div class="block sha1">
    <div class="shadow37">shadow7</div>
  </div>
  <div class="block sha1">
    <div class="shadow38">shadow8</div>
  </div>
  <div class="block sha1">
    <div class="shadow39">shadow9</div>
  </div>
  <div class="block sha1">
    <div class="shadow40">shadow10</div>
  </div>
  </div>

shadow41

shadow42

shadow43

shadow44

shadow45

shadow46

shadow47

shadow48

shadow49

shadow50

CSS
HTML

.block.sha5 { background-color: #9fa8da; }
.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 rgba(0,0,0,0);}
50% {box-shadow:  0px 0px 3px 20px rgba(0,0,0,0.8);}
100% {box-shadow:  0px 0px 0px rgba(0,0,0,0);}

}

				
<div class="well clearfix">
  <div class="block sha1">
    <div class="shadow41">shadow1</div>
  </div>
  <div class="block sha1">
    <div class="shadow42">shadow2</div>
  </div>
  <div class="block sha1">
    <div class="shadow43">shadow3</div>
  </div>
  <div class="block sha1">
    <div class="shadow44">shadow4</div>
  </div>
  <div class="block sha1">
    <div class="shadow45">shadow5</div>
  </div>
  <div class="block sha1">
    <div class="shadow46">shadow6</div>
  </div>
  <div class="block sha1">
    <div class="shadow47">shadow7</div>
  </div>
  <div class="block sha1">
    <div class="shadow48">shadow8</div>
  </div>
  <div class="block sha1">
    <div class="shadow49">shadow9</div>
  </div>
  <div class="block sha1">
    <div class="shadow50">shadow10</div>
  </div>
  </div>

shadow51

shadow52

shadow53

shadow54

shadow55

shadow56

shadow57

shadow58

shadow59

shadow60

CSS
HTML

.block.sha6 { background-color: #ffe57f; }
.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.5);}
.shadow52 {box-shadow: 0px 2px 5px -3px rgba(0,0,0,0.5);}
.shadow53 {box-shadow: 0px 4px 5px -3px rgba(0,0,0,0.5);}
.shadow54 {box-shadow: 0px 6px 5px -3px rgba(0,0,0,0.5);}
.shadow55 {box-shadow: 0px 8px 5px -3px rgba(0,0,0,0.5);}
.shadow56 {box-shadow: 0px 10px 5px -3px rgba(0,0,0,0.5);}
.shadow57 {box-shadow: 0px 12px 5px -3px rgba(0,0,0,0.5);}
.shadow58 {box-shadow: 0px 14px 5px -3px rgba(0,0,0,0.5);}
.shadow59 {box-shadow: 0px 16px 5px -3px rgba(0,0,0,0.5);}
.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.5);}
	100% {box-shadow:  0px 0px 0px rgba(0,0,0,0);}

		}

				
<div class="well clearfix">
  <div class="block sha1">
    <div class="shadow51">shadow1</div>
  </div>
  <div class="block sha1">
    <div class="shadow52">shadow2</div>
  </div>
  <div class="block sha1">
    <div class="shadow53">shadow3</div>
  </div>
  <div class="block sha1">
    <div class="shadow54">shadow4</div>
  </div>
  <div class="block sha1">
    <div class="shadow55">shadow5</div>
  </div>
  <div class="block sha1">
    <div class="shadow56">shadow6</div>
  </div>
  <div class="block sha1">
    <div class="shadow57">shadow7</div>
  </div>
  <div class="block sha1">
    <div class="shadow58">shadow8</div>
  </div>
  <div class="block sha1">
    <div class="shadow59">shadow9</div>
  </div>
  <div class="block sha1">
    <div class="shadow60">shadow10</div>
  </div>
  </div>

shadow61

shadow62

shadow63

shadow64

shadow65

shadow66

shadow67

shadow68

shadow69

shadow70

CSS
HTML

.block.sha7 { background-color: #b0bec5; }
.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;}

				
<div class="well clearfix">
  <div class="block sha1">
    <div class="shadow61">shadow1</div>
  </div>
  <div class="block sha1">
    <div class="shadow62">shadow2</div>
  </div>
  <div class="block sha1">
    <div class="shadow63">shadow3</div>
  </div>
  <div class="block sha1">
    <div class="shadow64">shadow4</div>
  </div>
  <div class="block sha1">
    <div class="shadow65">shadow5</div>
  </div>
  <div class="block sha1">
    <div class="shadow66">shadow6</div>
  </div>
  <div class="block sha1">
    <div class="shadow67">shadow7</div>
  </div>
  <div class="block sha1">
    <div class="shadow68">shadow8</div>
  </div>
  <div class="block sha1">
    <div class="shadow69">shadow9</div>
  </div>
  <div class="block sha1">
    <div class="shadow70">shadow10</div>
  </div>
  </div>

sample1

sample2

sample3

sample4

sample5

sample6

sample7

sample8

sample9

sample10

CSS
HTML

.block.sam1 { background-color: #ffccbc; }
.block.sam1 > div {transition:  all 0.3s ease-in-out}
.block.sam1 > div:hover {box-shadow:  none;}
.block.sam1:hover .sample1 {box-shadow: 140px 0 0 0 rgba(0,0,0,0.8) inset;}
.block.sam1:hover .sample2 {box-shadow: -140px 0 0 0 rgba(0,0,0,0.8) inset;}
.block.sam1:hover .sample3 {box-shadow: 0 140px 0 0 rgba(0,0,0,0.8) inset;}
.block.sam1:hover .sample4 {box-shadow: 0 -140px 0 0 rgba(0,0,0,0.8) inset;}
.block.sam1:hover .sample5 {box-shadow: 0 0 0 20px rgba(0,0,0,0.8) inset;}
.block.sam1:hover .sample6 {box-shadow: 0 0 40px 0 rgba(0,0,0,0.8) inset;}

.block.sam1:hover .sample7 {box-shadow: 140px 0 0 0 rgba(0,0,0,0.8) inset,
-140px 0 0 0 rgba(0,0,0,0.8) inset;}


.block.sam1:hover .sample8 {box-shadow: 0 140px 0 0 rgba(0,0,0,0.8) inset,
0 -140px 0 0 rgba(0,0,0,0.8) inset;}

.block.sam1:hover .sample9 {box-shadow: 0 0 0 10px rgba(0,0,0,0.8) inset,
0 0 0 70px rgba(0,0,0,0.8) inset;}

.block.sam1:hover .sample10 {box-shadow: 0 140px 10px 70px rgba(0,0,0,0.8) inset,
0 70px 0 10px rgba(0,0,0,0.8) inset;}

				
<div class="well clearfix">
  <div class="block sam1">
    <div class="sample1">sample1</div>
  </div>
  <div class="block sam1">
    <div class="sample2">sample2</div>
  </div>
  <div class="block sam1">
    <div class="sample3">sample3</div>
  </div>
  <div class="block sam1">
    <div class="sample4">sample4</div>
  </div>
  <div class="block sam1">
    <div class="sample5">sample5</div>
  </div>
  <div class="block sam1">
    <div class="sample6">sample6</div>
  </div>
  <div class="block sam1">
    <div class="sample7">sample7</div>
  </div>
  <div class="block sam1">
    <div class="sample8">sample8</div>
  </div>
  <div class="block sam1">
    <div class="sample9">sample9</div>
  </div>
  <div class="block sam1">
    <div class="sample10">sample10</div>
  </div>
  </div>

See the Pen Button hover effects with box-shadow by Giana (@giana) on CodePen.

See the Pen CSS3 Box Shadow styles by Steve Melcher (@xixao) on CodePen.

See the Pen box-shadow loader by brandon kennedy (@brandonkennedy) on CodePen.

See the Pen Preloader by Raul (@RaulC) on CodePen.

See the Pen Blurry Loader by Nathaniel Watson (@nw) on CodePen.

Professional web publishers

uuiiop132.dothome.co.kr

BOX-SHADOW

kimsojin