요소에 미세한 그림자 효과 하나만 추가되어도 디자인 퀄리티가 살아나는 느낌을 많이 받았다. 그래서 CSS 작업할 때 box-shadow 효과를 열심히 해봤는데 생각만큼 예쁘게 나오질 않았다. 예쁜 shadow 디자인을 찾으면 다 나오니 작업할 때는 이것들을 주로 사용했지만, 스스로도 만들 줄은 알아야 할 것 같아서 꼭 공부해보고 싶었던 부분이다.

box-shadow

박스에 그림자를 부여하는 속성
다음과 같이 사용한다.

box-shadow: 5px 5px 5px black;

offset-x (필수): x축(가로 축) 거리 (양수, 0, 음수 적용 가능). 길이 값 (% 단위 사용 금지)
offset-y (필수): y축(세로 축) 거리( 양수, 0, 음수 적용 가능). 길이 값 (% 단위 사용 금지)
blur-radius (옵션): 흐림 효과. 크기의 기준은 흐림 효과를 원의 반지름으로 측정 (양수, 0, 음수 없음).
초깃값은 0. 길이 값 (% 단위 사용 금지)
spread-radius (옵션): 그림자 확대와 축소 (양수, 0, 음수 적용 가능).
양수 값은 그림자를 확장하고 더 크게 만들고, 음수 값은 그림자를 축소
color (옵션): 그림자 색상 값. 초깃값은 현재 글자 색
inset (옵션): 그림자를 박스 외부 그림자에서 박스 내부 그림자로 변경

특징

1. 그림자 모양이 잘린다.
   text-shadow는 텍스트가 투명하거나 부분적으로 투명한 경우 비쳐 보인다.
   box-shadow의 그림자 모양이 박스의 모양으로 잘리게 된다.

2. 레이아웃에 영향을 주지 않는다.
   overflow여도 스크롤에 영향을 주지 않습니다.

3. border-radius의 영향을 받는다.

중첩

다음과 같이 여러개의 그림자를 중첩시킬 수 있으며, 먼저 정의한 그림자가 앞으로 온다.

 box-shadow: red 5px 5px 5px, orange 10px 10px 5px, yellow 15px 15px 5px, blue 20px 20px 5px, navy 25px 25px 5px, violet 30px 30px 5px;

사이트

generator 1
generator 2
generator 3
example 1
example 2

참고 자료

CSS box-shadow 속성 – 올바른 이해와 사용 방법