Box-Shadow

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	그림자의 효과를 내부로 나타냅니다.

Box-shadow

shadow01

shadow02

shadow03

shadow04

shadow05

shadow06

shadow07

shadow08

shadow09

shadow10

.shadow01 {box-shadow: 0px 0px 5px rgba(0,0,0,0.8);}
.shadow02 {box-shadow: 2px 2px 5px rgba(0,0,0,0.8);}
.shadow03 {box-shadow: 4px 4px 5px rgba(0,0,0,0.8);}
.shadow04 {box-shadow: 6px 6px 5px rgba(0,0,0,0.8);}
.shadow05 {box-shadow: 8px 8px 5px rgba(0,0,0,0.8);}
.shadow06 {box-shadow: 10px 10px 5px rgba(0,0,0,0.8);}
.shadow07 {box-shadow: 12px 12px 5px rgba(0,0,0,0.8);}
.shadow08 {box-shadow: 14px 14px 5px rgba(0,0,0,0.8);}
.shadow09 {box-shadow: 16px 16px 5px rgba(0,0,0,0.8);}
.shadow10 {box-shadow: 18px 18px 5px rgba(0,0,0,0.8);}

@keyframes shadow10 {
0% {box-shadow: 0px 0px 5px rgba(0,0,0,0.8);}
10% {box-shadow: -18px -18px 5px rgba(0,0,0,0.8);}
20% {box-shadow: 0px 0px 5px rgba(0,0,0,0.8);}
30% {box-shadow: 18px -18px 5px rgba(0,0,0,0.8);}
40% {box-shadow: 0px 0px 5px rgba(0,0,0,0.8);}
50% {box-shadow: 18px 18px 5px rgba(0,0,0,0.8);}
60% {box-shadow: 0px 0px 5px rgba(0,0,0,0.8);}
70% {box-shadow: -18px 18px 5px rgba(0,0,0,0.8);}
80% {box-shadow: 0px 0px 5px rgba(0,0,0,0.8);}
90% {box-shadow: 0px 0px 5px rgba(0,0,0,0.8);}
100% {box-shadow: 0px 0px 5px rgba(0,0,0,0.8);}                     
}

Box-shadow

shadow11

shadow12

shadow13

shadow14

shadow15

shadow16

shadow17

shadow18

shadow19

shadow20

.block.sha2 {background-color: #f06292;}
.block.sha2 > div {transition: all 0.3s ease;}
.block.sha2 > div:hover {box-shadow: none;}
.shadow11 {box-shadow: 8px 8px 0 rgba(0,0,0,0.8);}
.shadow12 {box-shadow: 8px 8px 3px rgba(0,0,0,0.8);}
.shadow13 {box-shadow: 8px 8px 6px rgba(0,0,0,0.8);}
.shadow14 {box-shadow: 8px 8px 9px rgba(0,0,0,0.8);}
.shadow15 {box-shadow: 8px 8px 12px rgba(0,0,0,0.8);}
.shadow16 {box-shadow: 8px 8px 15px rgba(0,0,0,0.8);}
.shadow17 {box-shadow: 8px 8px 18px rgba(0,0,0,0.8);}
.shadow18 {box-shadow: 8px 8px 21px rgba(0,0,0,0.8);}
.shadow19 {box-shadow: 8px 8px 24px rgba(0,0,0,0.8);}
.shadow20 {animation-name: shadow20; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out;}

@keyframes shadow20{
0% {box-shadow: 0px 0px 0px rgba(0,0,0,0.8);}
10% {box-shadow: 0px -8px 0px rgba(0,0,0,0.8);}
20% {box-shadow: 0px 0px 0px rgba(0,0,0,0.8);}
30% {box-shadow: 8px 0px 0px rgba(0,0,0,0.8);}
40% {box-shadow: 0px 0px 0px rgba(0,0,0,0.8);}
50% {box-shadow: 0px 8px 0px rgba(0,0,0,0.8);}
60% {box-shadow: 0px 0px 0px rgba(0,0,0,0.8);}
70% {box-shadow: -8px 0px 0px rgba(0,0,0,0.8);}
80% {box-shadow: 0px 0px 0px rgba(0,0,0,0.8);}
90% {box-shadow: 0px 0px 0px rgba(0,0,0,0.8);}
100% {box-shadow: 0px 0px 0px rgba(0,0,0,0.8);}
}

Box-shadow : spread

shadow21

shadow22

shadow23

shadow24

shadow25

shadow26

shadow27

shadow28

shadow29

shadow30

.block.sha3 {background-color: #ba68c8;}
.block.sha3 > div {transition: all 0.3s ease;}
.block.sha3 > div:hover {box-shadow: none;}
.shadow21 {box-shadow: 5px 5px 0px 5px rgba(0,0,0,0.8);}
.shadow22 {box-shadow: 8px 8px 0px 5px rgba(0,0,0,0.8);}
.shadow23 {box-shadow: 11px 11px 0px 5px rgba(0,0,0,0.8);}
.shadow24 {box-shadow: 14px 14px 0px 5px rgba(0,0,0,0.8);}
.shadow25 {box-shadow: 17px 17px 0px 5px rgba(0,0,0,0.8);}
.shadow26 {box-shadow: -5px -5px 0px 5px rgba(0,0,0,0.8);}
.shadow27 {box-shadow: -8px -8px 0px 5px rgba(0,0,0,0.8);}
.shadow28 {box-shadow: -11px -11px 0px 5px rgba(0,0,0,0.8);}
.shadow29 {box-shadow: -14px -14px 0px 5px rgba(0,0,0,0.8);}
.shadow30 {box-shadow: -17px -17px 0px 5px rgba(0,0,0,0.8);}

Box-shadow

shadow31

shadow32

shadow33

shadow34

shadow35

shadow36

shadow37

shadow38

shadow39

shadow40

.block.sha4 > div {transition: all 0.3s ease;}
.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 {box-shadow: 0px 0px 0px 19px rgba(0,0,0,0.8);}

Box-shadow

shadow41

shadow42

shadow43

shadow44

shadow45

shadow46

shadow47

shadow48

shadow49

shadow50

.block.sha5 > div {transition: all 0.3s ease;}
.block.sha5 > div:hover {box-shadow: none;}
.shadow41 {box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.8)}
.shadow42 {box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.8)}
.shadow43 {box-shadow: 0px 0px 3px 5px rgba(0,0,0,0.8)}
.shadow44 {box-shadow: 0px 0px 3px 7px rgba(0,0,0,0.8)}
.shadow45 {box-shadow: 0px 0px 3px 9px rgba(0,0,0,0.8)}
.shadow46 {box-shadow: 0px 0px 3px 11px rgba(0,0,0,0.8)}
.shadow47 {box-shadow: 0px 0px 3px 13px rgba(0,0,0,0.8)}
.shadow48 {box-shadow: 0px 0px 3px 15px rgba(0,0,0,0.8)}
.shadow49 {box-shadow: 0px 0px 3px 17px rgba(0,0,0,0.8)}
.shadow50 {box-shadow: 0px 0px 3px 19px rgba(0,0,0,0.8)}

Box-shadow

shadow51

shadow52

shadow53

shadow54

shadow55

shadow56

shadow57

shadow58

shadow59

shadow60

.block.sha6 > div {transition: all 0.3s ease;}
.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 {box-shadow: 0px 18px 5px -3px rgba(0,0,0,0.8)}

Box-shadow

shadow61

shadow62

shadow63

shadow64

shadow65

shadow66

shadow67

shadow68

shadow69

shadow70

.block.sha7 > div {transition: all 0.3s ease;}
.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}

Box-Shadow Sample

See the Pen Box-Shadow Button by jeongahlee (@jeongahlee) on CodePen.

Box-Shadow Button

See the Pen jXMryN by jeongahlee (@jeongahlee) on CodePen.

Circle Hover Effect

See the Pen Circle Hover Effect by jeongahlee (@jeongahlee) on CodePen.

image출처 : dribbble