Infor Reference

box-shadow : [h-shadow] [v-shadow] [blur] [spread] [color] [inset] / none;
Property Description
h-shadow 그림자의 수평(X)축 거리를 나타냅니다.
v-shadow 그림자의 수평(Y축) 거리를 나타냅니다.
blur 그림자의 흐림정도를 나타냅니다.
spread 그림자의 거리를 나타냅니다.
inset 그림자의 효과를 내부로 나타냅니다.
color 그림자의 색을 나타냅니다.

box-shadow

shadow01
shadow02
shadow03
shadow04
shadow05
shadow06
shadow07
shadow08
shadow09
shadow10
  1. .shadow01 {box-shadow: 0px 0px 5px rgba(0,0,0,0.8);}
  2. .shadow02 {box-shadow: 2px 2px 5px rgba(0,0,0,0.8);}
  3. .shadow03 {box-shadow: 4px 4px 5px rgba(0,0,0,0.8);}
  4. .shadow04 {box-shadow: 6px 6px 5px rgba(0,0,0,0.8);}
  5. .shadow05 {box-shadow: 8px 8px 5px rgba(0,0,0,0.8);}
  6. .shadow06 {box-shadow: 10px 10px 5px rgba(0,0,0,0.8);}
  7. .shadow07 {box-shadow: 12px 12px 5px rgba(0,0,0,0.8);}
  8. .shadow08 {box-shadow: 14px 14px 5px rgba(0,0,0,0.8);}
  9. .shadow09 {box-shadow: 16px 16px 5px rgba(0,0,0,0.8);}
  10. .shadow10 {box-shadow: 18px 18px 5px rgba(0,0,0,0.8);}
  11. animation-name: shadow10;
  12. animation-duration: 5s; 
  13. animation-iteration-count: 100; 몇번반복하는지
  14. animation-timing-function: ease-in-out;
  15. @keyframes shadow10 {
  16. 0% {box-shadow: 0px 0px 5px rgba(0,0,0,0.8);}
  17. 10% {box-shadow: -18px -18px 5px rgba(0,0,0,0.8);}
  18. 20% {box-shadow: 0px 0px 5px rgba(0,0,0,0.8);}
  19. 30% {box-shadow: 18px -18px 5px rgba(0,0,0,0.8);}
  20. 40% {box-shadow: 0px 0px 5px rgba(0,0,0,0.8);}
  21. 50% {box-shadow: 18px 18px 5px rgba(0,0,0,0.8);}
  22. 60% {box-shadow: 0px 0px 5px rgba(0,0,0,0.8);}
  23. 70% {box-shadow: -18px 18px 5px rgba(0,0,0,0.8);}
  24. 80% {box-shadow: 0px 0px 5px rgba(0,0,0,0.8);}
  25. 90% {box-shadow: 0px 0px 5px rgba(0,0,0,0.8);}
  26. 100% {box-shadow: 0px 0px 5px rgba(0,0,0,0.8);}
  27.                     }

box-shadow : blur

shadow11
shadow12
shadow13
shadow14
shadow15
shadow16
shadow17
shadow18
shadow19
shadow20

box-shadow : spread

shadow21
shadow22
shadow23
shadow24
shadow25
shadow26
shadow27
shadow28
shadow29
shadow30
  1. .block.sha3{background: #ba6818;}
  2. .block.sha3 > div {transition: all 0.3s ease;}
  3. .block.sha3 > div:hover {box-shadow: none;}
  4. .shadow21 {box-shadow: 5px 5px 0px 5px rgba(0,0,0,0.8);}
  5. .shadow22 {box-shadow: 8px 8px 0px 5px rgba(0,0,0,0.8);}
  6. .shadow23 {box-shadow: 11px 11px 0px 5px rgba(0,0,0,0.8);}
  7. .shadow24 {box-shadow: 14px 14px 0px 5px rgba(0,0,0,0.8);}
  8. .shadow25 {box-shadow: 17px 17px 0px 5px rgba(0,0,0,0.8);}
  9. .shadow26 {box-shadow: -5px -5px 0px 5px rgba(0,0,0,0.8);}
  10. .shadow27 {box-shadow: -8px -8px 0px 5px rgba(0,0,0,0.8);}
  11. .shadow28 {box-shadow: -11px -11px 0px 5px rgba(0,0,0,0.8);}
  12. .shadow29 {box-shadow: -14px -14px 0px 5px rgba(0,0,0,0.8);}
  13. .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
  1. .block.sha4{background: #ce93d8;}
  2. .block.sha4 > div {transition: all 0.3s ease;}
  3. .block.sha4 > div:hover {box-shadow: none;}         
  4. .shadow31 {box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.8);}
  5. .shadow32 {box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.8);}
  6. .shadow33 {box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.8);}
  7. .shadow34 {box-shadow: 0px 0px 0px 7px rgba(0,0,0,0.8);}
  8. .shadow35 {box-shadow: 0px 0px 0px 9px rgba(0,0,0,0.8);}
  9. .shadow36 {box-shadow: 0px 0px 0px 11px rgba(0,0,0,0.8);}
  10. .shadow37 {box-shadow: 0px 0px 0px 13px rgba(0,0,0,0.8);}
  11. .shadow38 {box-shadow: 0px 0px 0px 15px rgba(0,0,0,0.8);}
  12. .shadow39 {box-shadow: 0px 0px 0px 17px rgba(0,0,0,0.8);}
  13. .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
  1. .block.sha5{background: #d4e157;}
  2. .block.sha5 > div {transition: all 0.3s ease;}
  3. .block.sha5 > div:hover {box-shadow: none;}
  4. .shadow41 {box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.8)}
  5. .shadow42 {box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.8)}
  6. .shadow43 {box-shadow: 0px 0px 3px 5px rgba(0,0,0,0.8)}
  7. .shadow44 {box-shadow: 0px 0px 3px 7px rgba(0,0,0,0.8)}
  8. .shadow45 {box-shadow: 0px 0px 3px 9px rgba(0,0,0,0.8)}
  9. .shadow46 {box-shadow: 0px 0px 3px 11px rgba(0,0,0,0.8)}
  10. .shadow47 {box-shadow: 0px 0px 3px 13px rgba(0,0,0,0.8)}
  11. .shadow48 {box-shadow: 0px 0px 3px 15px rgba(0,0,0,0.8)}
  12. .shadow49 {box-shadow: 0px 0px 3px 17px rgba(0,0,0,0.8)}
  13. .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
  1. .block.sha6{background: #9ccc65;}
  2. .block.sha6 > div {transition: all 0.3s ease;}
  3. .block.sha6 > div:hover {box-shadow: none;}
  4. .shadow51 {box-shadow: 0px 0px 5px -3px rgba(0,0,0,0.8)}
  5. .shadow52 {box-shadow: 0px 2px 5px -3px rgba(0,0,0,0.8)}
  6. .shadow53 {box-shadow: 0px 4px 5px -3px rgba(0,0,0,0.8)}
  7. .shadow54 {box-shadow: 0px 6px 5px -3px rgba(0,0,0,0.8)}
  8. .shadow55 {box-shadow: 0px 8px 5px -3px rgba(0,0,0,0.8)}
  9. .shadow56 {box-shadow: 0px 10px 5px -3px rgba(0,0,0,0.8)}
  10. .shadow57 {box-shadow: 0px 12px 5px -3px rgba(0,0,0,0.8)}
  11. .shadow58 {box-shadow: 0px 14px 5px -3px rgba(0,0,0,0.8)}
  12. .shadow59 {box-shadow: 0px 16px 5px -3px rgba(0,0,0,0.8)}
  13. .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
  1. .block.sha7{background: #66bb6a;}
  2. .block.sha7 > div {transition: all 0.3s ease;}
  3. .block.sha7 > div:hover {box-shadow: none;}
  4. .shadow61 {box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.8) inset}
  5. .shadow62 {box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.8) inset}
  6. .shadow63 {box-shadow: 0px 0px 7px 3px rgba(0,0,0,0.8) inset}
  7. .shadow64 {box-shadow: 0px 0px 8px 4px rgba(0,0,0,0.8) inset}
  8. .shadow65 {box-shadow: 0px 0px 9px 5px rgba(0,0,0,0.8) inset}
  9. .shadow66 {box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.8) inset}
  10. .shadow67 {box-shadow: 0px 0px 11px 7px rgba(0,0,0,0.8) inset}
  11. .shadow68 {box-shadow: 0px 0px 12px 8px rgba(0,0,0,0.8) inset}
  12. .shadow69 {box-shadow: 0px 0px 13px 9px rgba(0,0,0,0.8) inset}
  13. .shadow70 {box-shadow: 0px 0px 14px 10px rgba(0,0,0,0.8) inset}

Box-shadow

See the Pen box-shadow Button by Yang (@yangareum) on CodePen.


Box-shadow

See the Pen xmEEKj by Yang (@yangareum) on CodePen.


Circle Effect

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