다플 로고다플 도구모음
🌑
개발자 도구

Box Shadow 생성기

슬라이더로 그림자를 조절하고 CSS 코드를 바로 복사하세요. 여러 레이어도 지원합니다.

그림자 레이어

0px 4px 16px 0px rgba(0, 0, 0, 0.15)

레이어 1 편집

px
-100px100px
px
-100px100px
px
0px100px
px
-50px50px
15%

미리보기

배경

실시간으로 그림자가 업데이트됩니다

CSS 코드

box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.15);

프리셋

공유하기

Box Shadow 생성기 이용 안내

Box Shadow 생성기란?

슬라이더로 box-shadow 값을 시각적으로 만드세요. 여러 레이어 추가, 실시간 미리보기, CSS 코드 바로 복사.

가로·세로 이동, 흐림, 확산, 색상과 inset을 조절하고 여러 그림자 레이어를 겹쳐 완성된 box-shadow 선언을 생성합니다.

Box Shadow 생성기 사용 방법

  1. 1

    입력 준비

    기본 그림자 레이어를 선택하고 미리보기에 사용할 요소와 배경을 확인하세요.

  2. 2

    옵션 설정

    가로·세로 위치, 흐림, 확산, 색상, inset과 추가 레이어를 조절하세요.

  3. 3

    결과 확인

    미리보기와 생성된 box-shadow 선언을 확인해 CSS 코드로 복사하세요.

기능과 사용 전 확인사항

처리 범위

카드의 얕은 그림자부터 안쪽 음영과 다중 광원 효과까지 슬라이더를 움직이며 실시간 미리보기와 CSS 값을 함께 확인할 수 있습니다.

사용 전 확인

큰 blur와 다수의 그림자는 렌더링 비용을 높일 수 있습니다. 실제 배경색과 요소 크기에서 모양과 스크롤 성능을 점검하세요.

자주 묻는 질문

여러 개의 그림자를 겹쳐 만들 수 있나요?

그림자 레이어를 추가해 서로 다른 위치, 흐림, 확산과 색상을 한 요소에 겹칠 수 있습니다. CSS에서는 앞에 작성된 그림자가 위에 그려지므로 레이어 순서를 바꾸면 겹침과 광원 인상이 달라집니다.

안쪽 그림자도 만들 수 있나요?

레이어의 inset 옵션을 선택하면 요소 안쪽으로 표현되는 그림자를 만들 수 있습니다. inset은 요소 테두리 안쪽에 렌더링되며 배경색과 그림자색의 대비에 따라 깊이 표현이 달라집니다.

만든 그림자를 CSS에 어떻게 적용하나요?

미리보기에서 모양을 확인한 뒤 생성된 `box-shadow` 선언을 복사해 원하는 CSS 선택자에 붙여 넣으세요. 여러 레이어 결과는 쉼표로 연결된 하나의 속성이므로 선언 전체를 복사하고 실제 컴포넌트 배경에서 확인하세요.

관련 글

Box Shadow 생성기 사용법과 활용 방법

기본 그림자 레이어를 선택하고 미리보기에 사용할 요소와 배경을 확인하세요. 가로·세로 위치, 흐림, 확산, 색상, inset과 추가 레이어를 조절하세요. 미리보기와 생성된 box-shadow 선언을 확인해 CSS 코드로 복사하세요.

Cron 표현식 생성기 사용법과 활용 방법

작업을 실행할 분, 시, 일, 월과 요일 조건을 선택하세요. 매번·특정 시각·간격 실행 조건을 조합하고 대상 시스템의 시간대를 확인하세요. 생성된 5필드 Cron 표현식과 한국어 실행 주기 설명이 의도와 같은지 비교하세요.

JWT 디코더 사용법과 활용 방법

분석할 JWT 문자열 전체를 입력란에 붙여 넣으세요. Header·Payload 탭과 exp·iat·nbf 시간 표시 방식을 선택해 값을 살펴보세요. 알고리즘과 클레임, 발급·만료 시간을 확인하되 별도의 서명 검증이 필요함을 기억하세요.