box-shadow

box-shadow 속성은 박스 요소의 그림자를 설정합니다.

문법

box-shadow : none | h-shadow | v-shadow | blur | spread | color | inset

종류 예시
none 박스에 그림자를 적용하지 않습니다.
h-shadow 그림자의 수평(X축) 거리를 나타냅니다.
v-shadow 그림자의 수직(Y축) 거리를 나타냅니다.
blur 그림자의 흐림정도 나타냅니다.
spread 그림자의 거리 나타냅니다.
color 그림자의 색 나타냅니다.
inset 그림자를 내부에 적용할 수 있습니다.

Sample01

shadow01
shadow02
shadow03
shadow04
shadow05
shadow06
shadow07
shadow08
.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);}

Sample02

shadow09
shadow10
shadow11
shadow12
shadow13
shadow14
shadow15
shadow16
.shadow09{box-shadow: 4px 4px 0 rgba(0,0,0,0.8);}
.shadow10{box-shadow: 4px 4px 3px rgba(0,0,0,0.8);}
.shadow11{box-shadow: 4px 4px 6px rgba(0,0,0,0.8);}
.shadow12{box-shadow: 4px 4px 9px rgba(0,0,0,0.8);}
.shadow13{box-shadow: 4px 4px 12px rgba(0,0,0,0.8);}
.shadow14{box-shadow: 4px 4px 15px rgba(0,0,0,0.8);}
.shadow15{box-shadow: 4px 4px 18px rgba(0,0,0,0.8);}
.shadow16{box-shadow: 4px 4px 21px rgba(0,0,0,0.8);}

Sample03

shadow17
shadow18
shadow19
shadow20
shadow21
shadow22
shadow23
shadow24
.shadow17{box-shadow: 4px 4px 0  1px rgba(0,0,0,0.8);}
.shadow18{box-shadow: 8px 8px 0  1px rgba(0,0,0,0.8);}
.shadow19{box-shadow: 12px 12px 0  1px rgba(0,0,0,0.8);}
.shadow20{box-shadow: 16px 16px 0  1px rgba(0,0,0,0.8);}

.shadow21{box-shadow: -4px -4px 0  1px rgba(0,0,0,0.8);}
.shadow22{box-shadow: -8px -8px 0  1px rgba(0,0,0,0.8);}
.shadow23{box-shadow: -12px -12px 0  1px rgba(0,0,0,0.8);}
.shadow24{box-shadow: -16px -16px 0  1px rgba(0,0,0,0.8);}

Sample04

shadow25
shadow26
shadow27
shadow28
shadow29
shadow30
shadow31
shadow32
.shadow25{box-shadow: 0px 0px 0px  1px rgba(0,0,0,0.8);}
.shadow26{box-shadow: 0px 0px 0px  3px rgba(0,0,0,0.8);}
.shadow27{box-shadow: 0px 0px 0px  5px rgba(0,0,0,0.8);}
.shadow28{box-shadow: 0px 0px 0px  7px rgba(0,0,0,0.8);}
.shadow29{box-shadow: 0px 0px 0px  9px rgba(0,0,0,0.8);}
.shadow30{box-shadow: 0px 0px 0px  11px rgba(0,0,0,0.8);}
.shadow31{box-shadow: 0px 0px 0px  13px rgba(0,0,0,0.8);}
.shadow32{box-shadow: 0px 0px 0px  15px rgba(0,0,0,0.8);}

Sample05

shadow33
shadow34
shadow35
shadow36
shadow37
shadow38
shadow39
shadow40
.shadow33{box-shadow: 0px 0px 5px  1px rgba(0,0,0,0.8) inset;}
.shadow34{box-shadow: 0px 0px 6px  2px rgba(0,0,0,0.8) inset;}
.shadow35{box-shadow: 0px 0px 7px  3px rgba(0,0,0,0.8) inset;}
.shadow36{box-shadow: 0px 0px 8px  4px rgba(0,0,0,0.8) inset;}
.shadow37{box-shadow: 0px 0px 9px  5px rgba(0,0,0,0.8) inset;}
.shadow38{box-shadow: 0px 0px 10px  6px rgba(0,0,0,0.8) inset;}
.shadow39{box-shadow: 0px 0px 11px  7px rgba(0,0,0,0.8) inset;}
.shadow40{box-shadow: 0px 0px 12px  8px rgba(0,0,0,0.8) inset;}

Sample06

shadow41
shadow42
shadow43
shadow44
shadow45
shadow46
shadow47
shadow48
.shadow41{
    box-shadow: 
    3px 3px 0 0 rgba(88,11,171,0.6);
}
.shadow42{
    box-shadow: 
    3px 3px 0 0 rgba(88,11,171,0.6),
    6px 6px 0 0 rgba(88,11,171,0.55);
}
.shadow43{
    box-shadow: 
    3px 3px 0 0 rgba(88,11,171,0.6),
    6px 6px 0 0 rgba(88,11,171,0.55),
    9px 9px 0 0 rgba(88,11,171,0.5);
}
.shadow44{
    box-shadow: 
    3px 3px 0 0 rgba(88,11,171,0.6),
    6px 6px 0 0 rgba(88,11,171,0.55),
    9px 9px 0 0 rgba(88,11,171,0.5),
    12px 12px 0 0 rgba(88,11,171,0.45);
}
.shadow45{
    box-shadow: 
    3px 3px 0 0 rgba(88,11,171,0.6),
    6px 6px 0 0 rgba(88,11,171,0.55),
    9px 9px 0 0 rgba(88,11,171,0.5),
    12px 12px 0 0 rgba(88,11,171,0.45),
    15px 15px 0 0 rgba(88,11,171,0.40);
}
.shadow46{
    box-shadow: 
    3px 3px 0 0 rgba(88,11,171,0.6),
    6px 6px 0 0 rgba(88,11,171,0.55),
    9px 9px 0 0 rgba(88,11,171,0.5),
    12px 12px 0 0 rgba(88,11,171,0.45),
    15px 15px 0 0 rgba(88,11,171,0.40),
    18px 18px 0 0 rgba(88,11,171,0.35);
}
.shadow47{
    box-shadow: 
    3px 3px 0 0 rgba(88,11,171,0.6),
    6px 6px 0 0 rgba(88,11,171,0.55),
    9px 9px 0 0 rgba(88,11,171,0.5),
    12px 12px 0 0 rgba(88,11,171,0.45),
    15px 15px 0 0 rgba(88,11,171,0.40),
    18px 18px 0 0 rgba(88,11,171,0.35),
    21px 21px 0 0 rgba(88,11,171,0.30);
}
.shadow48{
    box-shadow: 
    3px 3px 0 0 rgba(88,11,171,0.6),
    6px 6px 0 0 rgba(88,11,171,0.55),
    9px 9px 0 0 rgba(88,11,171,0.5),
    12px 12px 0 0 rgba(88,11,171,0.45),
    15px 15px 0 0 rgba(88,11,171,0.40),
    18px 18px 0 0 rgba(88,11,171,0.35),
    21px 21px 0 0 rgba(88,11,171,0.30),
    24px 24px 0 0 rgba(88,11,171,0.25);
}

Sample07

See the Pen Button Animation by 김용태 (@sdw6545) on CodePen.

Sample08

See the Pen Box Shadow Editor by 김용태 (@sdw6545) on CodePen.

Sample09

See the Pen css hover zoom scale by Wifeo (@wifeo) on CodePen.