박스 섀도우 생성기

box-shadow 및 버튼 생성기란?#

box-shadow는 요소 뒤에 낙하 그림자를 칠하는 CSS 규칙입니다. 이름과 달리 그림자보다 훨씬 더 많은 일을 합니다. 올바르게 겹쳐 쓰면 현대 UI 카드와 버튼이 물리적으로 느껴지게 하는 부드러운 입체감을 만들고, “눌림” 상태를 위한 inset 홈을 새길 수 있고, 포커스된 입력 주위의 색이 있는 글로우를 흉내 낼 수도 있습니다. 까다로운 점은 하나의 그림자를 제대로 만들려면 레이어당 5개의 값(오프셋 X, 오프셋 Y, 흐림, 확장, 색상)과 선택적 inset 키워드를 저울질해야 하고, 실제 버튼은 대부분 두세 개의 레이어를 겹쌓으므로 결국 10~15개의 숫자를 손으로 조정하게 된다는 것입니다.

이 페이지는 그런 산술을 없애줍니다. 사이드바에서 그림자 레이어를 겹쌓고 버튼의 모서리 반경·테두리·안쪽 여백·색을 다이얼로 맞추면, 오른쪽 창에 그림자가 적용된 실시간 버튼을 보여주고 바로 붙여넣을 수 있는 .btn CSS 규칙과 대응하는 <button> HTML을 작성해 줍니다. 페이지가 열릴 때 보이는 기본값은 현대 디자인 시스템에서 쓰는 친숙한 2레이어 입체 버튼입니다. 출발점으로는 좋고, 거기서 자신의 브랜드로 옮겨가면 됩니다.

사용 방법#

사이드바에 컨트롤이, 오른쪽 창에 미리보기, CSS 출력, HTML 출력이 있습니다.

1. 그림자를 만드세요. 그림자 아래에서 레이어 추가를 클릭해 새 레이어를 겹쌓습니다. 각 레이어에는 6개의 컨트롤이 있습니다.
   • 오프셋 X / 오프셋 Y — 그림자가 오른쪽/아래로 얼마나 이동하는지(음수는 왼쪽/위). 0/0이면 중앙에 있어 균일한 글로우가 됩니다.
   • 흐림 — 가장자리가 얼마나 부드러운지. 0은 단단하고 평면적인 복사이고, 큰 값은 확산시킵니다. CSS에서 흐림은 음수일 수 없습니다.
   • 확장 — 그림자의 범위를 늘리거나 줄입니다. 음수 확장은 넓은 흐림을 조이고 설득력 있는 가장자리로 만듭니다.
   • 색상 — hex 색상. 알파 채널(#00000033 같은 8자리 hex)을 사용해 그림자를 반투명하게 만들 수 있습니다. 완전 불투명 색은 고체 #RRGGBB로 렌더링됩니다.
   • 내부 그림자 — 이것을 켜면 요소 뒤가 아니라 요소 안쪽에 그림자를 칠합니다(눌려 들어간 새겨진 모습).
   • 위로 이동 / 아래로 이동 / 삭제가 레이어를 재정렬하거나 제거합니다. 목록의 첫 레이어가 맨 위에 칠해지고, 마지막이 가장 뒤에 있습니다.
2. 버튼을 스타일링하세요. 버튼 아래에서 레이블 텍스트를 설정한 뒤, 모서리 반경, 테두리 두께, 테두리 색상, 안쪽 여백 Y / X, 배경, 글자 색상을 설정합니다. 색상 필드는 hex 텍스트 상자와 네이티브 색상 선택기를 함께 씁니다.
3. 필요한 것을 복사하세요. CSS 옆의 복사는 전체 .btn 규칙을, HTML 옆의 복사는 <button> 요소를 가져옵니다. 테두리 두께를 0으로 하면 테두리가 border: none;으로 합쳐집니다.

주요 특징#

• 순서대로 여러 레이어. 설득력 있는 그림자는 거의 항상 두세 개의 레이어입니다. 요소에 가까운 조이고 어두운 가장자리와 더 멀리 부드럽고 밝은 확산. 필요한 만큼 겹쌓고 재정렬할 수 있습니다.
• 알파 인식 색 직렬화. 완전 불투명 색은 깨끗한 #RRGGBB로 내보내집니다. 투명도를 더하는 순간 실제 스타일시트가 쓰는 형태인 다듬어진 알파의 rgba(r, g, b, a)로 전환됩니다.
• 한 규칙에 버튼 전체. 모서리 반경, 테두리, 안쪽 여백, 배경, 글자 색상, 그림자가 모두 단일 .btn 블록으로 내보내지므로 한 번 붙여넣어 요소를 완전히 스타일링합니다.
• 일치하는 HTML. HTML 출력은 <button class="btn">레이블</button>이며, 라벨은 HTML 이스케이프됩니다. <나 &가 가득한 라벨도 붙여넣기에 안전합니다.
• 좌에서 우로 고정된 실시간 미리보기. 양의 X 오프셋은 항상 그림자를 오른쪽으로 밀므로, 페이지 언어와 무관하게 미리보기는 LTR로 강제됩니다.

실제 예시#

페이지는 만들어진 입체 남색 버튼을 기본으로 불러옵니다. 그림자는 두 레이어입니다. 버튼에 들러붙는 조인 -1px 확장 가장자리와 더 멀리 더 희미한 확산. 생성된 정확한 CSS:

.btn {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 10px 15px -3px rgba(0, 0, 0, 0.102);
  border-radius: 8px;
  border: none;
  padding: 10px 20px;
  background-color: #4F46E5;
  color: #FFFFFF;
}

두 레이어가 함께 작동하는 것을 주목하세요. 첫 번째(4px 6px 흐림, -1px 확장, 0.2 알파)가 날카로운 접촉 가장자리를 정의하고, 두 번째(10px 15px 흐림, -3px 확장, 0.102 알파)가 주변의 떠오르는 느낌을 제공합니다. 알파를 떨어뜨리면 그림자가 평평한 검은 도장이 되고, 확장을 올리면 버튼이 너무 높이 떠 있는 것처럼 보입니다.

눌림 상태를 원하면 그 레이어들을 지우고 하나만 추가하세요. 내부 그림자 켬, 오프셋 0/2, 흐림 4, 확장 0, 색상 #00000033. 출력은 inset 0 2px 4px rgba(0, 0, 0, 0.2)가 됩니다. 요소가 이제 표면에 가라앉은 것처럼 보여 :active 스타일에 완벽합니다.

FAQ#

hex를 입력했는데 색이 rgba(...)로 나오는 이유는?#

hex에 알파 채널이 있으면(#00000033 같은 8자리), 도구는 대부분의 CSS 도구와 구형 브라우저가 안정적으로 파싱하는 형태인 rgba(r, g, b, a)로 직렬화합니다. 알파가 없거나 FF인 완전 불투명 색은 간결한 #RRGGBB로 유지됩니다. 둘 다 설정한 대로 동일하게 렌더링됩니다. 하위 호환성에서 어느 표기가 더 견고한가의 문제일 뿐입니다.

레이어가 칠해지는 순서는?#

목록의 첫 레이어가 맨 위에, 마지막이 맨 아래에 칠해집니다. 자연스러운 입체감을 위해서는 날카롭고 어둡고 가까운 레이어를 먼저, 부드럽고 밝고 먼 레이어를 둘째로 두세요. 그러면 조인 접촉 가장자리가 주변 확산에 덮이지 않습니다. 미리보기가 제대로 읽힐 때까지 위로 이동 / 아래로 이동으로 재정렬하세요.

흐림과 확장의 차이는?#

흐림은 그림자 가장자리를 부드럽게 합니다(전체 색에서 투명으로의 그라데이션). 확장은 흐림이 적용되기 전에 전체 그림자를 고정량만큼 늘리거나 줄입니다. 양수 확장은 더 크고 더 고체로 만들고, 음수 확장은 잠식해서 넓은 흐림 레이어의 조이고 전문적인 가장자리의 비결입니다. 흔한 실수는 흐림만으로 푹신한 구름을 만드는 것이며, -2px나 -3px의 확장을 더하면 다시 형태를 잡습니다.

이 그림자를 버튼이 아니라 div에 쓸 수 있나요?#

네. CSS는 box-shadow를 받는 모든 요소에 작동합니다. box-shadow: 줄만 복사하거나(또는 전체 규칙을 자신의 선택자로 이름을 바꿔서), 필요 없는 버튼 전용 선언은 빼세요. HTML 출력은 실제로 <button>을 원할 때만 의미가 있습니다.