CSS Box Shadow 생성기

Design box shadows visually and get the CSS instantly. Supports multiple layers and presets.

즉시 결과 브라우저에서 실행

Tip: Use 'Add Shadow' to build multi-layer shadows.

미리보기

미리보기 background

사전 설정

사용 방법?

  1. 1
    값 조정Set X/Y offset, blur, spread, color and opacity. Preview updates instantly.
  2. 2
    여러 그림자 추가Click 'Add Shadow' to layer additional shadows. Each is independently configurable.
  3. 3
    CSS를 복사하세요Copy the generated CSS and paste it into your project.

자주 묻는 질문

상자 그림자 값은 무엇을 의미합니까?
Syntax: offset-x | offset-y | blur-radius | spread-radius | color. The inset keyword moves the shadow inside the element.
여러 그림자를 사용하는 이유는 무엇입니까?
CSS box-shadow supports comma-separated multiple definitions for layered depth effects.
브라우저 지원은 어떤가요?
box-shadow is fully supported in all modern browsers. No vendor prefix required.

CSS box-shadow 생성기의 역할

이 도구는 CSS box-shadow 값을 눈으로 확인하며 만들 수 있는 브라우저 기반 생성기입니다. 각 그림자 레이어마다 X 오프셋, Y 오프셋, 흐림 반경, 퍼짐 값, 색상, 불투명도, inset 여부를 조정할 수 있습니다. 값을 바꾸면 미리보기 상자와 CSS 출력이 즉시 갱신됩니다. 여러 레이어를 추가할 수 있어 단순한 카드 그림자뿐 아니라 Material 느낌의 이중 그림자, 컬러 그림자, 네온 효과, 안쪽 그림자를 만들 수 있습니다. 출력은 box-shadow: ...; 형식이며 색상은 rgba 와 투명도로 표현됩니다.

프리셋으로 시작하기

subtle, medium, large, dramatic, inset, colored, material, neon 같은 프리셋을 누르면 대표적인 그림자 조합이 바로 적용됩니다. 이후 슬라이더와 색상 선택기로 버튼, 카드, 모달, 이미지 박스, 대시보드 패널에 맞게 세부 조정하면 됩니다. 오른쪽 미리보기 배경색도 바꿀 수 있으므로 실제 페이지 배경에 가까운 색에서 그림자가 너무 강하거나 약하지 않은지 확인할 수 있습니다. 작은 버튼에는 퍼짐과 흐림을 줄이고, 큰 카드에는 Y 오프셋과 blur 를 조금 키우는 방식이 자연스럽습니다.

CSS 적용 시 주의점

그림자는 시각적 깊이를 만드는 데 유용하지만 과하면 텍스트 가독성과 레이아웃의 정돈감을 해칠 수 있습니다. hover 상태를 만들 때는 기본 그림자를 복사한 뒤 투명도나 blur 를 조금만 늘리는 편이 좋습니다. 생성된 코드는 그대로 붙여 넣을 수 있지만, 여러 컴포넌트에서 반복해서 쓴다면 CSS 변수나 디자인 토큰으로 정리하는 것이 유지보수에 유리합니다. 어두운 배경, 밝은 배경, 모바일 화면에서 모두 확인해 보아야 실제 서비스에서 안정적인 효과를 얻을 수 있습니다.

댓글