CSS 그림자 생성기

CSS 그림자 생성기 도구란?

사용 방법

1. 출력 타입(box-shadow / drop-shadow)을 선택합니다. box-shadow 는 spread(확산)와 inset(안쪽)을 지원하고, drop-shadow 는 요소의 모양을 따르는 그림자를 만들 수 있습니다.
2. 레이어를 추가하고 수평·수직 위치·번짐·확산·색·불투명도를 슬라이더로 조정합니다. 여러 레이어는 드래그로 겹침 순서를 바꿀 수 있고 inset 으로 안쪽 그림자로도 만들 수 있습니다.
3. 그림자 레이어 모드에서는 프리셋(부드러움·Material·플로팅·하드·롱 섀도우·글로우)을 한 번의 클릭으로 적용합니다. 뉴모피즘이 필요하면 상단 토글로 뉴모피즘 전용 모드로 전환해 베이스 색상·거리·강도 슬라이더로 실시간 생성하고, 미리보기의 배경색·요소색·모양을 바꿔 완성된 모습을 확인합니다.
4. “CSS 코드”에서 CSS·CSS 변수·Tailwind·SCSS 탭을 전환하고, “CSS 코드 복사”로 코드를 가져와 구현에 붙여넣습니다. “URL 복사”로 설정을 공유할 수 있습니다.

활용 사례

• 버튼이나 카드, 모달 등에 부드러운 그림자를 넣으려는 디자이너·코더가 box-shadow 의 CSS 를 복사해 바로 준비합니다.
• 다중 레이어나 inset 을 조합해 입체감 있는 세련된 그림자나 안쪽 그림자를 정교하게 만들고 싶은 프런트엔드 엔지니어.
• 뉴모피즘(뉴모픽 UI)의 요철 그림자를 베이스 색상에서 빠르게 생성하고 싶은 분.
• Tailwind 의 boxShadow 설정이나 CSS 변수·SCSS 변수로 그림자를 그대로 코드에 옮기고 싶은 개발자.
• 정한 그림자를 공유 URL 로 팀에 전달하거나 나중에 같은 설정을 재현하고 싶은 분.

주의사항

• 그림자 생성은 모두 브라우저 안에서 이루어지며 입력한 내용이 외부로 전송되지 않습니다.
• drop-shadow(`filter: drop-shadow()`)는 spread(확산)와 inset(안쪽)을 지원하지 않습니다. 이 항목들은 box-shadow 를 선택했을 때만 반영됩니다.
• drop-shadow 를 여러 개 겹치면 앞 그림자의 결과에 다시 그림자가 더해집니다(쉼표로 구분하는 box-shadow 와는 보이는 방식이 다릅니다).
• 공유 URL 에는 출력 타입·각 레이어(위치·번짐·확산·색·불투명도·inset)·미리보기 설정이 포함됩니다. URL 을 열면 같은 설정으로 그림자가 재현됩니다.

자주 묻는 질문