[CSS] 🎨 그림자(box-shadow) 디자인 스타일 모음

Codepen에서 괜찮은 디자인을 뽐내는 CSS 템플릿중에 box-shadow 디자인 요소들 모아 간추려 포스팅 해보았다.

급하게 CSS 템플릿을 찾으면서도 모던하면서도 준수한 디자인 예시를 원할때 좋은 참고가 되기를 바란다.

---

box-shadow 생성기

css 그림자 generator 이다. 간단한 버튼 조작을 통해 box-shdaow를 구성할 수 있다.

See the Pen CSS3 Generator: box-shadow by Montego (@Montego) on CodePen.

---

box-shadow 예제

 

See the Pen Material Design Box Shadows by Samuel Thornton (@sdthornton) on CodePen.

 

See the Pen CSS Box Shadow Examples by vavik (@vavik96) on CodePen.

 

See the Pen Better Box Shadows by Ben Vaughan (@guyjin) on CodePen.

 

See the Pen CSS-Tricks box-shadow by Brittany Chiang (@bchiang7) on CodePen.

 

See the Pen CSS3 box-shadow examples (one-sided, two-sided, three-sided) by Stephan Schmitz (@eyecatchup) on CodePen.

 

See the Pen Google Material Design Box Shadow by Wisnu ST (@wisnust10) on CodePen.

 

See the Pen Material Drop Shadows by Lee (@protomorph) on CodePen.