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);}
Sample05
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(179, 59, 236, 0.6);
}
.shadow42 {
box-shadow:
3px 3px 0 0 rgba(179, 59, 236, 0.6),
6px 6px 0 0 rgba(179, 59, 236, 0.55);
}
.shadow43 {
box-shadow:
3px 3px 0 0 rgba(179, 59, 236, 0.6),
6px 6px 0 0 rgba(179, 59, 236, 0.55),
9px 9px 0 0 rgba(179, 59, 236, 0.5);
}
.shadow44 {
box-shadow:
3px 3px 0 0 rgba(179, 59, 236, 0.6),
6px 6px 0 0 rgba(179, 59, 236, 0.55),
9px 9px 0 0 rgba(179, 59, 236, 0.5),
12px 12px 0 0 rgba(179, 59, 236, 0.45);
}
.shadow45 {
box-shadow:
3px 3px 0 0 rgba(179, 59, 236, 0.6),
6px 6px 0 0 rgba(179, 59, 236, 0.55),
9px 9px 0 0 rgba(179, 59, 236, 0.5),
12px 12px 0 0 rgba(179, 59, 236, 0.45),
15px 15px 0 0 rgba(179, 59, 236, 0.40);
}
.shadow46 {
box-shadow:
3px 3px 0 0 rgba(179, 59, 236, 0.6),
6px 6px 0 0 rgba(179, 59, 236, 0.55),
9px 9px 0 0 rgba(179, 59, 236, 0.5),
12px 12px 0 0 rgba(179, 59, 236, 0.45),
15px 15px 0 0 rgba(179, 59, 236, 0.40),
18px 18px 0 0 rgba(179, 59, 236, 0.35);
}
.shadow47 {
box-shadow:
3px 3px 0 0 rgba(179, 59, 236, 0.6),
6px 6px 0 0 rgba(179, 59, 236, 0.55),
9px 9px 0 0 rgba(179, 59, 236, 0.5),
12px 12px 0 0 rgba(179, 59, 236, 0.45),
15px 15px 0 0 rgba(179, 59, 236, 0.40),
18px 18px 0 0 rgba(179, 59, 236, 0.35),
21px 21px 0 0 rgba(179, 59, 236, 0.3);
}
.shadow48 {
box-shadow:
3px 3px 0 0 rgba(179, 59, 236, 0.6),
6px 6px 0 0 rgba(179, 59, 236, 0.55),
9px 9px 0 0 rgba(179, 59, 236, 0.5),
12px 12px 0 0 rgba(179, 59, 236, 0.45),
15px 15px 0 0 rgba(179, 59, 236, 0.40),
18px 18px 0 0 rgba(179, 59, 236, 0.35),
21px 21px 0 0 rgba(179, 59, 236, 0.3),
24px 24px 0 0 rgba(179, 59, 236, 0.25);
}
Sample07
See the Pen Button Animation by webstory (@webstoryboys) on CodePen.
Sample08
See the Pen Box Shadow Editor by Coding Journey (@Coding_Journey) on CodePen.
Sample09
See the Pen Collection of Button Hover Effects by David Conner (@davidicus) on CodePen.