본문으로 건너뛰기
툴허브

CSS 박스 그림자 생성기

다중 레이어 box-shadow CSS 코드를 시각적으로 생성하세요

미리보기

CSS 코드

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.19),
    0px 6px 6px 0px rgba(0, 0, 0, 0.23);

미리보기 설정

200px
200px
12px

도구

그림자 레이어(2/5)

#10px 10px 20px 0px
#20px 6px 6px 0px

프리셋

사용 가이드

box-shadow 기본 구문

  • •box-shadow: [inset] x-offset y-offset blur spread color
  • •X 오프셋: 양수=오른쪽, 음수=왼쪽 방향 그림자
  • •Y 오프셋: 양수=아래, 음수=위 방향 그림자
  • •블러: 그림자 흐림 정도 (0=선명, 높을수록 부드러움)
  • •스프레드: 그림자 확장/축소 크기
  • •여러 그림자를 쉼표로 구분하여 중첩 가능

디자인 팁

  • •자연스러운 그림자는 Y 오프셋을 X보다 크게 설정하세요
  • •블러 값은 오프셋의 2배 정도가 자연스럽습니다
  • •투명도가 있는 색상(rgba)을 사용하면 더 세련된 효과를 얻습니다
  • •다중 레이어를 활용하면 깊이감을 표현할 수 있습니다
  • •Neumorphism 효과는 밝은/어두운 2개 그림자를 조합합니다

CSS 박스 그림자 생성기란?

CSS 박스 그림자 생성기는 box-shadow 코드를 시각적으로 직접 확인하며 생성할 수 있는 무료 온라인 도구입니다. Material Design, Neumorphism(뉴모피즘) 등 다양한 프리셋을 제공하며, 다중 레이어 그림자를 쌓아 입체적인 UI 효과를 손쉽게 만들 수 있습니다. 웹 개발자와 UI 디자이너가 반복 코드 작성 없이 완성된 CSS 코드를 바로 복사하여 프로젝트에 적용할 수 있습니다.

CSS 박스 그림자 생성기 활용 팁

  • 다중 레이어 활용: 여러 그림자를 쌓으면 뉴모피즘·입체 카드 효과를 구현할 수 있습니다.
  • inset 그림자: 안쪽 그림자로 눌린 버튼, 오목한 텍스트 필드 효과를 연출하세요.
  • Material Design 프리셋: 구글 머티리얼 디자인 고도별 그림자 값을 한 번에 적용합니다.
  • 성능 최적화: blur 반경이 클수록 GPU 부담이 늘어나므로 적절한 값을 사용하세요.
  • PNG 내보내기: 완성된 그림자 미리보기를 이미지로 저장해 디자인 시안에 활용합니다.