그림자 효과 생성기 무료 | 다중 레이어 Box Shadow 코드 생성

그림자 색상, 이동 거리, 블러, 퍼짐, 투명도를 조정해 부드러운 다중 레이어 box-shadow 코드를 실시간으로 만들 수 있습니다.

실시간 미리보기

ShadowCard depth

다중 레이어 그림자 효과를 실시간으로 확인합니다.

Box Shadow 코드

box-shadow:
  0px 12px 18px 1px rgba(15, 23, 42, 0.171),
  0px 15px 25px -1px rgba(15, 23, 42, 0.142),
  0px 21px 31px -3px rgba(15, 23, 42, 0.113),
  0px 29px 38px -5px rgba(15, 23, 42, 0.084);

Tailwind 클래스

shadow-[0px_12px_18px_1px_rgba(15,_23,_42,_0.171),_0px_15px_25px_-1px_rgba(15,_23,_42,_0.142),_0px_21px_31px_-3px_rgba(15,_23,_42,_0.113),_0px_29px_38px_-5px_rgba(15,_23,_42,_0.084)]

사용 방법

파일 선택

그림자 색상과 레이어 수를 정합니다.

설정 조정

이동 거리, 블러, 퍼짐, 투명도를 조정합니다.

결과 확인 후 다운로드

미리보기를 확인한 뒤 box-shadow 코드를 복사합니다.

실사용 시나리오

카드 UI, 팝업, 플로팅 패널처럼 표면 위계가 중요한 화면에서 그림자 톤을 빠르게 맞출 수 있습니다.

카드 컴포넌트에 너무 강하지 않은 그림자 값을 빠르게 찾을 때 사용합니다.

모달과 드롭다운처럼 떠 있는 표면의 입체감을 일관되게 맞춥니다.

디자인 시안과 실제 CSS 코드 사이의 간격을 줄일 때 유용합니다.

같이 쓰면 좋은 다른 툴

작업 시간을 더 단축해줄 도구들을 추천합니다.

전체 보기

그리드 생성기

맞춤형 CSS Grid와 Flexbox 레이아웃 코드를 시각적으로 설계합니다.

그라데이션 생성기

각도와 색상을 지정해 CSS 그라데이션 코드를 생성합니다.

컬러 피커

색상을 고르고 HEX, RGB, HSL 값을 바로 확인합니다.