CSS box-shadow 생성기
슬라이더를 움직이거나 프리셋을 고르면 카드에 그림자가 바로 보이고 box-shadow CSS를 원클릭으로 복사할 수 있습니다.
프리셋
레이어
0px
8px
24px
-8px
#000000
15%
사용 방법
- 카드에 부드러운 그림자가 이미 적용되어 있습니다. 슬라이더(X/Y 오프셋, 흐림, 확산)를 움직이거나 색상과 불투명도를 고르거나 Inset을 체크해 안쪽 그림자를 만드세요. 모든 변경이 실시간 반영되며 누를 버튼은 없습니다.
- 프리셋 칩(부드러운 부유, 강한 들뜸, Inset, 네온 글로우, 이중 그림자, 뉴모피즘)을 클릭하면 완성된 모양이 즉시 적용됩니다.
- “+”로 레이어를 추가해 그림자를 쌓을 수 있고 각 레이어는 따로 편집합니다. 전체 box-shadow 선언을 원클릭으로 복사하세요.
예시
프리셋
부드러운 부유
box-shadow CSS
box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.15);
아무 선택자에나 바로 붙여 넣으세요. 예: .card { box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.15); }. “이중 그림자” 프리셋은 쉼표로 구분된 그림자 두 개를 출력하고 “뉴모피즘”은 밝은 배경에서 잘 보입니다.
범위, 제한 및 자주 묻는 질문
- box-shadow만 다룹니다. drop-shadow() 필터, text-shadow, 그라데이션 그림자는 CSS에 없으므로 범위 밖입니다.
- 색상은 선택기와 불투명도 슬라이더로 정합니다. 붙여 넣은 CSS 색상 문자열을 파싱하지 않으므로 잘못 입력하거나 잘못 읽을 일이 없습니다.
- 뉴모피즘은 밝은 표면에 의존하므로 아주 어두운 배경에서는 효과가 보이지 않을 수 있습니다. 이는 스타일의 특성이지 버그가 아닙니다.
- 아무것도 저장되지 않고 링크 매개변수로 공유되지 않습니다. 새로고침하면 기본값인 부드러운 부유로 돌아갑니다. 모든 처리는 브라우저에서 이루어집니다.
관련 도구
색상이나 그림자를 더 다듬어야 할 때 유용합니다.