Box Shadow 생성기

슬라이더를 드래그하여 박스 그림자를 만들고, 레이어를 쌓아 깊이감을 더한 뒤 완성된 CSS를 즉시 복사해 보세요.

그림자 레이어
레이어 1
CSS
슬라이더를 조절하여 그림자를 디자인해 보세요.

모든 그림자는 브라우저에서 직접 렌더링됩니다. 설정한 어떤 데이터도 BroBroGo 서버로 전송되지 않습니다.

자주 묻는 질문

오프셋, 흐림, 확산은 각각 무엇을 조절하나요?

오프셋(Offset)은 그림자를 가로/세로 방향으로 이동시키고, 흐림(Blur)은 가장자리를 부드럽게 만들며, 확산(Spread)은 흐려지기 전에 그림자의 크기를 키우거나 줄입니다. 음수 확산 값을 사용하면 그림자가 안쪽으로 모여 밀착된 느낌을 줄 수 있습니다.

inset 옵션은 어떤 역할을 하나요?

일반적인 그림자는 떠 있는 카드 뒤의 빛처럼 요소 바깥쪽에 드리워집니다. 반면 Inset 옵션은 그림자를 안쪽으로 뒤집어 요소가 푹 들어간 것처럼 보이게 만듭니다. 안으로 들어간 입력창이나 눌린 버튼을 표현할 때 유용합니다.

그림자 레이어를 여러 개 쌓는 이유는 무엇인가요?

단일 그림자는 일정 크기를 넘어가면 평평하고 부자연스러워 보입니다. 실제 입체감은 보통 좁고 어두운 그림자와 넓고 부드러운 그림자를 조합하여 만들어집니다. 두 번째 레이어를 추가하고 각각 독립적으로 조절하여 깊이감 있는 효과를 연출해 보세요.

BroBroGo 편집팀이 작성하고 검토했습니다.최근 업데이트:

Box Shadow 생성기 소개

Box Shadow 생성기는 슬라이더를 조절하여 디자인 요소에 맞는 맞춤형 박스 그림자를 만들 수 있는 도구입니다. 여러 개의 그림자 레이어를 쌓아 복잡하고 깊이감 있는 시각적 효과를 연출할 수 있으며, 생성된 CSS 코드를 즉시 복사하여 프로젝트에 바로 적용할 수 있습니다. 웹 요소의 box-shadow를 디자인하려는 사람, 미세하고 밀착된 그림자나 부드럽고 넓게 퍼지는 그림자를 만들려는 사용자에게 유용합니다. 또한 요소가 안으로 푹 들어간 듯한 느낌을 주거나, 깊이감을 위해 여러 그림자 레이어를 쌓아야 하는 디자이너와 프론트엔드 개발자에게 적합합니다.

입력 항목 및 조절 기능

이 도구는 다음과 같은 입력 옵션을 제공하여 그림자의 세부 속성을 정밀하게 조절할 수 있도록 지원합니다:

  • 가로 오프셋: 그림자를 왼쪽 또는 오른쪽으로 이동시키는 슬라이더로, -50px에서 50px까지 조절할 수 있습니다.
  • 세로 오프셋: 그림자를 위 또는 아래로 이동시키는 슬라이더로, -50px에서 50px까지 조절할 수 있습니다.
  • 흐림 (Blur): 그림자의 가장자리를 부드럽게 만드는 슬라이더로, 0px에서 100px까지 조절할 수 있습니다.
  • 확산 (Spread): 흐려지기 전에 그림자의 크기를 키우거나 줄이는 슬라이더로, -50px에서 50px까지 조절할 수 있습니다.
  • 그림자 색상: 그림자의 색상을 선택할 수 있는 색상 선택기입니다.
  • 불투명도: 그림자의 투명도를 조절하는 슬라이더입니다.
  • 안쪽 그림자: 그림자가 요소의 안쪽에 나타나도록 전환하는 토글 스위치입니다.
  • 레이어 추가: 새로운 그림자 레이어를 추가하는 버튼입니다.
  • 레이어 삭제: 선택한 그림자 레이어를 제거하는 버튼입니다.

출력 정보 및 실시간 반영

설정을 변경하면 다음과 같은 출력 항목이 실시간으로 업데이트되어 표시됩니다:

  • 레이어: 개별 그림자 레이어를 식별하는 라벨입니다.
  • 가로 오프셋: 해당 레이어에 현재 설정된 가로 오프셋 값입니다.
  • 세로 오프셋: 해당 레이어에 현재 설정된 세로 오프셋 값입니다.
  • 흐림 (Blur): 해당 레이어에 현재 설정된 흐림 값입니다.
  • 확산 (Spread): 해당 레이어에 현재 설정된 확산 값입니다.
  • 그림자 색상: 해당 레이어에 선택된 색상입니다.
  • 불투명도: 해당 레이어에 현재 설정된 불투명도 값입니다.
  • 안쪽 그림자: 해당 레이어의 안쪽 그림자 옵션 활성화 상태(켜짐/꺼짐)입니다.
  • CSS: 박스 그림자를 구현하기 위해 생성된 최종 CSS 코드입니다.

동작 규칙 및 특이 사항

  • 가로 오프셋, 세로 오프셋, 흐림, 확산 슬라이더를 조절하면 CSS 출력이 실시간으로 업데이트됩니다.
  • 각 슬라이더의 조절 범위는 가로 오프셋 -50px ~ 50px, 세로 오프셋 -50px ~ 50px, 흐림 0px ~ 100px, 확산 -50px ~ 50px로 제한됩니다.
  • 레이어를 추가하면 기본값을 가진 새로운 그림자 레이어가 생성되며, 레이어를 삭제하면 선택한 레이어가 제거됩니다.
  • 도구는 기본적으로 5개의 레이어를 미리 렌더링해 둡니다. 첫 번째 레이어는 기본값 0 8 24 -4와 18% 투명도를 가진 검은색으로 설정되어 있으며, 나머지 레이어들은 처음에 숨겨진 상태로 시작합니다.
  • 여러 레이어가 활성화되어 있을 때, 생성되는 CSS 출력에는 각 레이어의 값이 쉼표로 구분되어 나열됩니다.
  • 음수 확산 값을 사용하면 그림자가 안쪽으로 모여 밀착된 느낌을 주며, 안쪽 그림자 옵션을 켜면 그림자가 요소 내부로 뒤집혀 렌더링됩니다.

개인정보 보호 및 데이터 처리

사용자가 설정하는 모든 그림자는 외부 서버를 거치지 않고 사용자의 브라우저에서 직접 렌더링됩니다. 사용자가 도구에서 조절하고 설정한 그 어떤 데이터도 BroBroGo 서버로 전송되거나 업로드되지 않습니다.

자주 묻는 질문 (FAQ)

Q: 오프셋, 흐림, 확산은 각각 무엇을 조절하나요?
A: 오프셋(Offset)은 그림자를 가로/세로 방향으로 이동시키고, 흐림(Blur)은 가장자리를 부드럽게 만들며, 확산(Spread)은 흐려지기 전에 그림자의 크기를 키우거나 줄입니다. 음수 확산 값을 사용하면 그림자가 안쪽으로 모여 밀착된 느낌을 줄 수 있습니다.

Q: inset 옵션은 어떤 역할을 하나요?
A: 일반적인 그림자는 떠 있는 카드 뒤의 빛처럼 요소 바깥쪽에 드리워집니다. 반면 Inset 옵션은 그림자를 안쪽으로 뒤집어 요소가 푹 들어간 것처럼 보이게 만듭니다. 안으로 들어간 입력창이나 눌린 버튼을 표현할 때 유용합니다.

Q: 그림자 레이어를 여러 개 쌓는 이유는 무엇인가요?
A: 단일 그림자는 일정 크기를 넘어가면 평평하고 부자연스러워 보입니다. 실제 입체감은 보통 좁고 어두운 그림자와 넓고 부드러운 그림자를 조합하여 만들어집니다. 두 번째 레이어를 추가하고 각각 독립적으로 조절하여 깊이감 있는 효과를 연출해 보세요.

CSS Cubic Bezier 생성기두 핸들을 드래그하여 이징 곡선을 만들고, 등속 운동과 비교하는 실시간 애니메이션을 확인한 뒤 cubic-bezier() 값을 복사해 보세요.그라데이션 생성기선형, 방사형 또는 원추형 그라데이션을 만들고, 색상 중단점을 추가하고 방향을 설정하여 클릭 한 번으로 CSS를 복사해 보세요.Border Radius 생성기슬라이더로 각 모서리를 둥글게 깎고, 타원형 모드로 유기적인 물방울 모양을 디자인하여 CSS를 즉시 복사해 보세요.Flexbox 생성기시각적 컨트롤러로 flex 컨테이너와 아이템을 구성하고, 실시간으로 반응하는 레이아웃을 확인한 뒤 클릭 한 번으로 CSS를 복사해 보세요.CSS Grid 생성기열과 행을 설정하고, 셀 위를 드래그하여 아이템을 배치한 뒤, 클릭 한 번으로 그리드 CSS와 매칭되는 HTML 코드를 복사해 보세요.CSS clamp() 계산기소형 및 대형 화면에서의 크기를 입력하면 그 사이에서 부드럽게 변하는 유동적인 clamp() 값을 생성해 줍니다. 글자 크기, 패딩, 마진, 갭 등에 활용해 보세요.색상 변환기HEX, RGB, HSL, HSV, CMYK, LAB 간 색상 변환 — 한 필드를 수정하면 나머지도 실시간으로 자동 업데이트됩니다.CSS 정렬 및 압축기지저분한 CSS의 들여쓰기를 정리하여 가독성을 높이거나, 규칙 순서를 변경하지 않는 안전 모드로 코드를 압축하여 배포해 보세요.웹 접근성 명도 대비 검사기텍스트 색상과 배경 색상을 입력하여 WCAG 명도 대비 비율과 AA/AAA 통과 여부를 실시간으로 확인해 보세요.