요소에 그림자를 적용하기 위한 CSS 코드를 손쉽게 생성할 수 있는 온라인 도구입니다.

🛠 사용 방법

1. Inset 설정: 'Inset' 옵션을 선택하면 내부 그림자가 적용됩니다. 선택하지 않으면 외부 그림자가 적용됩니다.


2. Opacity 설정: 'Opacity' 슬라이더를 사용하여 그림자의 투명도를 설정합니다. (0.1 ~ 1.0)


3. Horizontal Offset (X): 'Horizontal Offset (X)' 입력란에 그림자의 수평 위치를 설정합니다. (양수: 오른쪽, 음수: 왼쪽)


4. Vertical Offset (Y): 'Vertical Offset (Y)' 입력란에 그림자의 수직 위치를 설정합니다. (양수: 아래쪽, 음수: 위쪽)


5. Blur Radius: 'Blur Radius' 입력란에 그림자의 흐림 정도를 설정합니다. 값이 클수록 더 부드럽고 퍼진 그림자가 됩니다.


6. Spread Radius: 'Spread Radius' 입력란에 그림자의 크기를 설정합니다. (양수: 그림자 확대, 음수: 그림자 축소)


7. Shadow Color: 'Shadow Color' 선택기를 사용하여 그림자의 색상을 설정합니다.


8. CSS 코드 확인: 위의 설정에 따라 자동으로 생성된 'box-shadow' CSS 코드가 표시됩니다.

📌 유용한 상황

• 웹 디자인 🎨 - 요소에 그림자를 적용하여 입체감과 시각적 효과를 줄 때.


• UI/UX 디자인 🖥️ - 사용자 인터페이스 요소의 강조나 구분을 위해 그림자를 활용할 때.


• 프론트엔드 개발 💻 - CSS 코드를 작성할 때 정확한 'box-shadow' 속성을 생성하여 적용할 때.

💡 이 도구는 다양한 그림자 효과를 시각적으로 설정하고, 해당하는 CSS 코드를 손쉽게 생성하여 디자인과 개발 작업을 효율적으로 도와줍니다.