Box shadow CSS 스타일 자동 생성 사이트, HTML CSS Javascript

html-css-js.com/css/generator/box-shadow

Box Shadow CSS Generator

HTML 스타일을 줄 때 box-shadow 나 text-shadow의 그림자를 정교하게 주는 건 여간 어려운 일이 아니다. box-shadow 스타일의 크기나 투명도, 위치, 번짐 정도를 실시간으로 볼 수 있는 사이트 있다. 

본인도 자주 애용하는 사이트로 정교하게 box-shadow 효과를 줄 때 사용한다. 먼저 위 링크 페이지로 이동

---

 

왼쪽 편에 shift right, shift down, spreadm, blur, opacity, color 메뉴가 보인다. 직관적으로 수정이 용이하도록 그래프 포인트를 마우스로 직접 이동시키면 우측에 샘플 preview 박스가 실시간으로 변경한 스타일이 적용되는 것 확인할 수 있다.

---

또한 샘플 preview 박스도 임의로 크기 조정이 가능하며, 박스 색상도 변경이 가능하다. 정말 제대로 된 느낌을 보고자 한다면 본인이 퍼블리싱할 박스를 유사하게 맞춰서 조정하는 것도 괜찮아 보인다.

---

본인은 은은하게 약간의 명암 정도만 주는 편이기 때문에 샘플 preview 박스가 본인이 생각하는 비주얼로 나왔다면, 좌측 메뉴 하단에 CSS 스타일은 복사해서 퍼블리싱하는 box 영역에 그대로 적용하면 된다.

---

또한, 직접 조절하는 box-shadow 스타일 외 우측 하단에는 샘플로 다양한 타입의 box-shadow 샘플이 있으므로 직접 선택 후 응용하여 사용해도 좋다. 워낙 센 스타일만 있지만, 그것을 좋아하거나 필요로 하는 사람들이 있으니 정말 알찬 메뉴라고 할 수 있다.

 

이렇게 직접적으로 box-shadow의 스타일을 정교하게 반영하는 것은 실무자 입장에서는 정말 편하다고 할 수 있다. 업무능률을 올리는 실용적인 HTML CSS Javascript의 box-shadow 메뉴. 앞으로도 자주 이용할 것이다 :)

---

본 게시글이 도움이 되셨다면 로그인 없이 클릭 가능한 ♥ 공감 버튼 클릭 부탁드립니다 :) 
"당신의 하루가 별보다 빛나길"