box-shadow 생성기는 어떤 도구인가요

CSS의 box-shadow 속성은 값이 다섯 개나 붙습니다. 수평 거리, 수직 거리, 흐림, 확산, 그리고 색상. 숫자만 보고 결과를 머릿속으로 그리기가 어려워서, 코드를 고치고 새로고침하고 다시 고치는 일을 반복하게 되죠. 이 도구는 그 다섯 값을 슬라이더로 바꾸는 동안 오른쪽 상자에 그림자가 그대로 나타나도록 만들었습니다.

슬라이더가 움직일 수 있는 범위는 코드에 정해 두었습니다. 수평(x)과 수직(y)은 -100px에서 100px까지, 흐림(blur)은 0에서 150px, 확산(spread)은 -50px에서 100px입니다. 음수 방향으로 밀면 그림자가 반대쪽으로 가고, 확산을 음수로 주면 그림자가 상자보다 작게 오므라듭니다. 불투명도는 0~100% 슬라이더로 조절하는데, 이 값은 색상 코드와 합쳐져 rgba() 형태로 출력됩니다.

inset 체크박스를 켜면 바깥으로 퍼지던 그림자가 상자 안쪽으로 파고들어, 눌린 버튼이나 입력창 같은 느낌을 만듭니다. 아래쪽 출력 칸에는 늘 완성된 한 줄이 세미콜론까지 붙어 나오므로, 복사해서 스타일시트에 그대로 붙여 넣으면 끝입니다. 초기화 버튼은 x·y 10px, 흐림 20px, 확산 0, 불투명도 25%, 색상 #1F2430이라는 처음 상태로 되돌립니다.

사용 방법

1. 수평·수직 슬라이더로 그림자가 떨어질 방향과 거리를 정합니다.
2. 흐림 값을 올려 가장자리를 부드럽게 하고, 확산으로 그림자 덩어리 자체의 크기를 키우거나 줄입니다.
3. 색상 견본을 눌러 색을 고르거나 옆 칸에 #RRGGBB 또는 #RGB 형식으로 직접 적습니다.
4. 불투명도를 낮춰 자연스러운 농도를 찾고, 필요하면 inset을 켭니다.
5. CSS 복사 버튼을 눌러 box-shadow: …; 한 줄을 클립보드에 담습니다.