본문으로 건너뛰기

CSS 그림자 생성기

CSS box-shadow와 text-shadow를 시각적으로 만들고 코드를 복사할 수 있는 무료 온라인 도구입니다.

Box Shadow

그림자 타입

그림자 레이어

레이어 1
10%

CSS 코드

box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);

미리 설정된 그림자

주요 기능​

  • 2가지 타입: Box Shadow, Text Shadow
  • 실시간 미리보기: 변경 사항 즉시 확인
  • 다중 레이어: 최대 5개의 그림자 레이어 추가
  • 세밀한 조절: X/Y 오프셋, 블러, 확산, 색상, 투명도
  • Inset 지원: 내부 그림자 효과
  • 미리 설정: 6가지 그림자 프리셋
  • 원클릭 복사: CSS 코드 즉시 복사

그림자 타입​

1. Box Shadow​

box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1);

요소의 외부 또는 내부에 그림자 효과를 추가합니다.

매개변수:

  • X 오프셋: 수평 방향 이동 (-50px ~ 50px)
  • Y 오프셋: 수직 방향 이동 (-50px ~ 50px)
  • 블러: 그림자의 흐림 정도 (0 ~ 100px)
  • 확산: 그림자의 크기 (-50px ~ 50px)
  • 색상: 그림자 색상 및 투명도
  • Inset: 내부 그림자로 변환

사용 예시:

  • 카드 그림자
  • 버튼 입체감
  • 모달 배경
  • 이미지 테두리 효과

2. Text Shadow​

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

텍스트에 그림자 효과를 추가합니다.

매개변수:

  • X 오프셋: 수평 방향 이동 (-50px ~ 50px)
  • Y 오프셋: 수직 방향 이동 (-50px ~ 50px)
  • 블러: 그림자의 흐림 정도 (0 ~ 100px)
  • 색상: 그림자 색상 및 투명도

사용 예시:

  • 헤더 타이틀
  • 로고 텍스트
  • 네온 효과
  • 입체 텍스트

그림자 속성 상세 설명​

X/Y 오프셋 (Offset)​

/* X: 오른쪽으로 10px, Y: 아래로 10px */
box-shadow: 10px 10px 0 0 black;

/* X: 왼쪽으로 10px, Y: 위로 10px */
box-shadow: -10px -10px 0 0 black;
  • 양수: 오른쪽/아래로 이동
  • 음수: 왼쪽/위로 이동
  • 0: 이동 없음

블러 (Blur)​

/* 블러 없음 - 선명한 그림자 */
box-shadow: 0 0 0 0 black;

/* 블러 10px - 부드러운 그림자 */
box-shadow: 0 0 10px 0 black;

/* 블러 30px - 매우 부드러운 그림자 */
box-shadow: 0 0 30px 0 black;
  • 0: 선명한 경계
  • 작은 값 (1-10px): 약간 흐림
  • 중간 값 (10-30px): 자연스러운 흐림
  • 큰 값 (30px+): 매우 부드러운 확산

확산 (Spread) - Box Shadow만​

/* 확산 0 - 기본 크기 */
box-shadow: 0 0 10px 0 black;

/* 확산 5px - 그림자가 5px 커짐 */
box-shadow: 0 0 10px 5px black;

/* 확산 -5px - 그림자가 5px 작아짐 */
box-shadow: 0 0 10px -5px black;
  • 양수: 그림자 크기 증가
  • 음수: 그림자 크기 감소
  • 0: 크기 변화 없음

Inset (내부 그림자)​

/* 외부 그림자 */
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1);

/* 내부 그림자 */
box-shadow: inset 0 4px 6px 0 rgba(0, 0, 0, 0.1);
  • 없음: 외부 그림자 (기본값)
  • inset: 내부 그림자 (오목한 효과)

다중 레이어 그림자​

여러 그림자를 쉼표로 구분하여 겹쳐서 사용할 수 있습니다.

입체감 있는 카드​

.elevated-card {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
}

.elevated-card:hover {
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.22);
}

네온 효과​

.neon-text {
  text-shadow:
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px #fff,
    0 0 40px #0ff,
    0 0 70px #0ff;
}

입체 텍스트​

.3d-text {
  text-shadow:
    1px 1px 0 #ccc,
    2px 2px 0 #c9c9c9,
    3px 3px 0 #bbb,
    4px 4px 0 #b9b9b9,
    5px 5px 0 #aaa;
}

실용 예제​

1. 부드러운 카드 그림자​

.card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

2. Material Design 그림자​

/* Elevation 1 */
.elevation-1 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

/* Elevation 2 */
.elevation-2 {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

/* Elevation 3 */
.elevation-3 {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

3. 버튼 그림자​

.button {
  background: #3498db;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.2s;
}

.button:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

.button:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transform: translateY(0);
}

4. 내부 그림자 입력창​

.input {
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s;
}

.input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06),
              0 0 0 3px rgba(52, 152, 219, 0.1);
}

5. 텍스트 가독성 향상​

.text-on-image {
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  /* 배경 이미지 위에서도 잘 보임 */
}

.outlined-text {
  color: white;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
  /* 텍스트 외곽선 효과 */
}

프리셋 그림자​

Soft (부드러움)​

box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);

미세한 그림자, 카드나 패널에 적합

Medium (중간)​

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

적당한 입체감, 버튼이나 중요 요소에 적합

Strong (강함)​

box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.2);

강한 입체감, 모달이나 플로팅 요소에 적합

Lifted (들어올림)​

box-shadow:
  0 10px 25px -5px rgba(0, 0, 0, 0.1),
  0 6px 10px -5px rgba(0, 0, 0, 0.05);

들어올려진 효과, 호버 상태에 적합

Inset (내부)​

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

오목한 효과, 입력창에 적합

Text Shadow (텍스트)​

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

기본 텍스트 그림자

브라우저 호환성​

Box Shadow​

  • ✅ Chrome 10+
  • ✅ Firefox 4+
  • ✅ Safari 5.1+
  • ✅ Edge 12+
  • ✅ IE 9+
  • ✅ 모든 모바일 브라우저

Text Shadow​

  • ✅ Chrome 4+
  • ✅ Firefox 3.5+
  • ✅ Safari 4+
  • ✅ Edge 12+
  • ✅ IE 10+
  • ✅ 모든 모바일 브라우저

성능 최적화​

1. 애니메이션 시 주의​

/* 나쁨: 그림자 직접 애니메이션 */
.card {
  transition: box-shadow 0.3s;
}

/* 좋음: opacity나 transform 사용 */
.card::after {
  content: '';
  position: absolute;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s;
}

.card:hover::after {
  opacity: 1;
}

2. 과도한 블러 피하기​

/* 나쁨: 매우 큰 블러 값 */
box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);

/* 좋음: 적절한 블러 값 */
box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.5);

3. 다중 그림자 제한​

/* 나쁨: 너무 많은 레이어 */
box-shadow:
  0 1px 3px rgba(0,0,0,0.1),
  0 2px 6px rgba(0,0,0,0.1),
  0 4px 12px rgba(0,0,0,0.1),
  0 8px 24px rgba(0,0,0,0.1),
  0 16px 48px rgba(0,0,0,0.1);

/* 좋음: 2-3개 레이어 */
box-shadow:
  0 4px 6px rgba(0,0,0,0.1),
  0 2px 4px rgba(0,0,0,0.06);

디자인 팁​

1. 자연스러운 그림자​

  • Y 오프셋을 X 오프셋보다 크게
  • 블러 값은 오프셋의 1.5-2배
  • 투명도는 0.1-0.3 사이
/* 자연스러운 그림자 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);

2. 거리감 표현​

/* 가까움 - 작은 그림자 */
.near {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* 중간 - 중간 그림자 */
.medium {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* 멀리 - 큰 그림자 */
.far {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

3. 색상 활용​

/* 흰색 하이라이트 + 검은색 그림자 */
.button {
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.1) inset,
    0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 브랜드 컬러 그림자 */
.primary-button {
  background: #3498db;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
}

4. 다크 모드 대응​

/* 라이트 모드 */
.card {
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 다크 모드 */
@media (prefers-color-scheme: dark) {
  .card {
    background: #1a1a1a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  }
}

접근성 고려사항​

1. 명암비​

그림자만으로 요소를 구분하지 말고 테두리도 함께 사용

.card {
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

2. 포커스 표시​

.button:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

3. 고대비 모드​

@media (prefers-contrast: high) {
  .card {
    border: 2px solid currentColor;
    box-shadow: none;
  }
}

관련 도구​