CSS box-shadow 생성기
직관적인 UI로 고급 CSS 그림자(box-shadow)를 생성하세요.
다중 레이어와 최신 디자인 트렌드를 지원하는 무료 도구입니다.
레이어 설정
그림자 매개변수
미리보기
도구 소개
CSS box-shadow 생성기는 직관적인 UI를 통해 웹 디자인의 필수 요소인 그림자(box-shadow) 스타일을 만드는 무료 도구입니다.
단순한 그림자뿐만 아니라 여러 레이어로 구성된 깊이 있는 그림자, 애플 및 최신 웹 서비스에서 쓰이는 부드러운 그림자, 3D 느낌의 뉴모피즘(Neumorphism), 플랫한 네오 브루탈리즘(Neo Brutalism)까지 사전 설정에서 클릭 한 번으로 즉시 만들 수 있습니다.
생성된 코드는 표준 CSS 속성, CSS 변수(사용자 지정 속성), Tailwind CSS 유틸리티 클래스(임의의 값 지원) 세 가지 형식으로 출력되며 복사 버튼으로 쉽게 가져갈 수 있습니다.
사용 방법
상단 사전 설정에서 원하는 이미지와 가장 가까운 프리셋을 선택하세요. "레이어 추가"를 눌러 처음부터 직접 만들 수도 있습니다.
X/Y 오프셋(위치), 흐림 강도, 확산 반경, 색상 및 불투명도를 조정합니다. 여러 레이어를 겹치면 더 자연스럽고 고급스러운 그림자를 표현할 수 있습니다.
환경에 맞게 출력 패널에서 "CSS" 또는 "Tailwind" 형식을 선택하고 클립보드 버튼을 눌러 코드를 복사하세요.
속성 가이드
box-shadow의 구문 및 속성
box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;
- offset-x / offset-y
- 그림자의 가로, 세로 위치입니다. 양수는 오른쪽/아래로, 음수는 왼쪽/위로 그림자를 이동시킵니다.
- blur-radius (흐림 반경)
- 그림자의 흐림 정도입니다. 값이 클수록 그림자가 더 넓고 연하게 퍼집니다. 0이면 날카로운 경계선(단색 그림자)이 됩니다.
- spread-radius (확산 반경)
- 그림자 자체의 크기를 확장하거나 축소합니다. 양수면 요소보다 큰 그림자가, 음수면 요소보다 작은 그림자가 만들어집니다.
- inset (내부 그림자)
- 이 키워드를 지정하면 그림자가 요소의 외부가 아닌 내부로 향하게 됩니다. 요소가 움푹 파인 UI를 표현할 때 사용됩니다.
자주 묻는 질문
Q. box-shadow가 성능에 영향을 미치나요?
Q. box-shadow와 filter: drop-shadow의 차이점은 무엇인가요?
Q. inset은 어떤 표현에 사용되나요?
Q. 그림자를 여러 겹 쌓으면 어떤 이점이 있나요?
활용 사례
카드 UI 및 모달
요소를 배경에서 돋보이게 하여 클릭할 수 있는 요소이거나 중요한 콘텐츠임을 시각적으로 사용자에게 전달합니다.
버튼 Hover/Active 상태
마우스 오버 시 그림자를 넓게 퍼뜨리거나, 클릭 시 `inset`으로 전환하여 눌리는 느낌이 나는 반응형 버튼을 구현할 수 있습니다.
뉴모피즘(Neumorphism) 디자인
배경과 같은 색상의 요소에 밝은 그림자와 어두운 그림자를 대각선으로 배치하여, 요소가 밀려 나오거나 오목하게 파인 듯한 질감을 표현합니다.
글로우(Glow) 효과
오프셋을 0으로 설정하고 선명한 색상으로 그림자를 확산시키면, CSS만으로 요소가 빛을 발하는 듯한 네온 효과를 줄 수 있습니다.
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.