CSS box-shadow 생성기
실시간 미리보기로 box-shadow CSS 생성. 오프셋, 흐림, 확산, 색상, 불투명도를 조절한 뒤 코드를 복사하세요.
미리보기
매개변수
오프셋 X (px)
오프셋 Y (px)
흐림 (px)
확산 (px)
색상
불투명도
생성된 CSS
이 도구 정보
프론트엔드 개발자용 무료 온라인 CSS box-shadow 생성기입니다. CSS box-shadow 속성은 요소에 하나 이상의 그림자를 추가합니다. 각 그림자는 수평 오프셋(offset-x), 수직 오프셋(offset-y), 흐림 반경, 확산, 색으로 정의됩니다. 선택 항목 "inset" 키워드는 안쪽 그림자를 만듭니다. 슬라이더와 색상 선택기로 모든 매개변수를 조절하고, 미리보기 상자에서 실시간으로 확인한 뒤 생성된 CSS(예: box-shadow: 0 8px 24px 0 rgba(0,0,0,0.15);)를 스타일시트에 복사할 수 있습니다. 설치 없이 브라우저에서 실행됩니다.
사용 방법
1. 매개변수 조절: 슬라이더 또는 숫자 입력으로 오프셋 X(가로), 오프셋 Y(세로), 흐림, 확산을 설정합니다. 색상 선택기 또는 HEX 값(예 #000000)으로 그림자 색, 불투명도(0–1)를 지정하고, 안쪽 그림자가 필요하면 "내부 그림자"를 선택하세요.
2. 미리보기: 위 샘플 상자가 실시간으로 갱신됩니다. 복사 전에 효과를 확인하세요.
3. 코드 복사: 만족스러우면 "코드 복사"를 클릭해 생성된 box-shadow CSS를 클립보드에 복사한 뒤 CSS 파일이나 인라인 스타일에 붙여넣으세요.