CSS Box Shadow 생성기
그림자 레이어
레이어가 최소 하나 있어야 합니다.
CSS 출력
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.25);관련 외부 도구
일부 링크는 제휴 링크입니다.
관련 도구
CSS box-shadow를 시각적으로 디자인하고 한 번의 클릭으로 코드를 복사하세요. 슬라이더를 드래그해 오프셋, 블러, 스프레드, 색상, 불투명도를 조절하면 대형 실시간 미리보기가 즉시 업데이트됩니다. 여러 그림자 레이어를 쌓거나 임의 레이어를 inset(내부) 그림자로 전환하고, 미리 만들어진 프리셋에서 시작할 수도 있습니다. 모든 처리가 브라우저에서 이루어지며 데이터는 업로드되지 않습니다.
사용 방법
- 오프셋 X/Y, 블러, 스프레드 슬라이더를 움직이며 실시간 미리보기를 확인하세요.
- 그림자 색상을 선택하고 불투명도를 조절하세요.
- 깊이를 더하려면 레이어를 추가하거나, 레이어를 inset(내부) 그림자로 전환하세요.
- box-shadow CSS를 복사하거나, Tailwind 탭으로 전환해 유틸리티 값을 가져오세요.
box-shadow 속성 이해하기
CSS box-shadow는 오프셋 X, 오프셋 Y, 블러, 스프레드, 색상 순으로 작성하며, 선택적으로 inset 키워드를 추가할 수 있습니다. 쉼표로 구분해 여러 그림자를 나열할 수 있습니다.
오프셋 X & Y
오프셋 X는 그림자를 수평으로, 오프셋 Y는 수직으로 이동시킵니다. 양수 값은 오른쪽·아래로, 음수 값은 왼쪽·위로 그림자를 이동시킵니다.
블러 반경
블러는 그림자의 가장자리를 부드럽게 합니다. 0은 선명하고 날카로운 경계를 만들고, 값이 클수록 부드럽게 퍼지는 그림자가 됩니다. 음수는 설정할 수 없습니다.
스프레드 반경
스프레드는 블러를 적용하기 전에 그림자를 확장(양수)하거나 축소(음수)합니다. 약간 음수로 설정하면 세밀하고 은은한 그림자를 만들 수 있습니다.
Inset(내부 그림자)
inset 키워드를 사용하면 그림자가 요소 바깥이 아닌 안쪽에 그려집니다. 눌린 버튼, 입력 필드, 내부 입체감 표현에 적합합니다.
색상과 불투명도
그림자는 순수한 검정보다 반투명한 어두운 색상으로 설정할 때 더 자연스러워 보입니다. 불투명도를 낮추면 사실적인 효과를 얻을 수 있습니다.
기능
다중 그림자 레이어
하나의 요소에 여러 그림자를 쌓을 수 있습니다. 촘촘하고 어두운 그림자와 더 넓고 부드러운 그림자를 조합하는 것이 사실적이고 세련된 깊이를 만드는 비결입니다.
내부(inset) 그림자
임의 레이어를 내부 그림자로 전환해 눌린 효과, 조각된 효과, 오목한 효과를 만드세요 — 버튼과 폼 필드에 완벽합니다.
기본 제공 프리셋
Material 엘리베이션, 소프트·하드 그림자, neumorphism 또는 색상 글로우 프리셋에서 시작해 취향에 맞게 세밀하게 조정하세요.
라이트·다크 미리보기
미리보기 배경을 라이트와 다크로 전환해 다양한 배경에서 그림자가 어떻게 보이는지 확인하세요.
한 번의 클릭으로 복사 (CSS 또는 Tailwind)
바로 붙여넣을 수 있는 box-shadow 선언을 복사하거나, Tailwind 임의 값 shadow-[…] 형식으로 유틸리티 우선 프로젝트에 활용하세요.
주요 활용 사례
카드와 컨테이너
카드에 낮은 불투명도의 부드러운 그림자를 더해 콘텐츠가 묶음으로 보이고 살짝 떠 있는 느낌을 줍니다.
버튼과 호버 상태
버튼에 은은한 그림자를 추가하고, 호버 시 더 크게 하거나 inset 그림자로 누른 느낌을 연출하세요.
Neumorphism
요소 양쪽에 밝은 그림자와 어두운 그림자를 조합해 부드럽게 돌출된 neumorphism 스타일을 만드세요.
글로우와 포커스 링
오프셋 없이 스프레드가 있는 색상 그림자를 사용해 글로우 효과나 접근성 높은 포커스 하이라이트를 만드세요.
참고 사항 및 팁
- 크고 블러가 많은 그림자를 여러 개 사용하면 렌더링 성능에 영향을 줄 수 있습니다. 애니메이션이나 스크롤 요소에서는 자제해 주세요.
- 블러 값이 매우 크면 그리기 비용이 가장 높습니다. 사실감을 위해 작은 그림자를 겹쳐 쌓는 방식을 권장합니다.
- 그림자가 가독성을 해치지 않도록 충분한 대비를 유지하세요.
- inset 그림자는 요소 내부에 그려지므로 테두리 박스 밖으로 벗어나지 않습니다.
자주 묻는 질문
- box-shadow와 filter: drop-shadow의 차이는 무엇인가요?
- box-shadow는 요소의 직사각형 테두리 박스(border-radius 적용)를 따르고, drop-shadow는 투명 PNG나 불규칙한 형태 등 실제 모양을 따릅니다. 이 도구는 box-shadow를 생성합니다.
- 하나의 요소에 여러 그림자를 추가할 수 있나요?
- 네. CSS에서는 쉼표로 구분해 여러 그림자를 지정할 수 있으며, 이 생성기에서도 여러 레이어를 쌓을 수 있습니다. 그림자를 조합하는 것이 사실적인 깊이감의 핵심입니다.
- inset 그림자란 무엇인가요?
- inset 그림자는 요소 바깥이 아닌 안쪽에 그려지는 그림자입니다. 눌린 버튼, 입력 필드, 오목한 표면 표현에 유용합니다. 임의 레이어에서 Inset 옵션을 켜면 됩니다.
- box-shadow가 페이지 속도를 느리게 하나요?
- 몇 개의 정적 그림자는 문제없습니다. 크고 블러가 심한 그림자는 그리기 비용이 높으므로, 애니메이션이나 자주 다시 그려지는 요소에서는 주의해서 사용하세요.
- 데이터가 서버에 업로드되나요?
- 아니요. 생성기는 완전히 브라우저 안에서 동작합니다. 서버로 아무것도 전송되지 않으며 회원가입도 필요하지 않습니다.