실행 가능한 CSS 문서: 텍스트 그림자

Q: text-shadow의 문법은 어떻게 되나요?

text-shadow: offset-x offset-y blur-radius color;예요. 예를 들면 text-shadow: 2px 2px 4px rgb(0 0 0 / 40%);예요. 두 오프셋은 필수이고, 흐림의 기본값은 0, 색의 기본값은 글자 색이에요.

Q: 텍스트 그림자를 여러 개 넣으려면 어떻게 하나요?

그림자를 쉼표로 구분해요. text-shadow: 0 0 4px #fff, 0 0 12px #2563eb; 첫 번째 그림자가 뒤의 그림자들 위에 그려져요.

Q: 텍스트에 글로우 효과는 어떻게 만드나요?

오프셋 없이 흐림만 있는 그림자를 쓰고, 흐림을 점점 키운 그림자를 여러 개 겹치는 경우가 많아요. text-shadow: 0 0 4px #60a5fa, 0 0 12px #2563eb; 어두운 배경에서는 네온 글로우처럼 보여요.

Q: text-shadow에도 box-shadow처럼 spread 값이 있나요?

없어요. text-shadow에는 spread도, inset 키워드도 없어요. 글자 둘레의 그림자를 두껍게 하려면 그림자를 여러 개 겹치거나, 외곽선에는 -webkit-text-stroke를 쓰세요.

CSS 텍스트 그림자 text-shadow: 문법, 글로우, 외곽선

text-shadow는 텍스트 뒤에 그림자를 하나 이상 그려요. 네 가지 값(x 오프셋, y 오프셋, 흐림, 색), 그림자를 겹쳐서 글로우, 외곽선, 3D 효과를 만드는 법, 복잡한 배경에서 그림자로 텍스트를 읽기 좋게 만드는 법을 알아봐요.

이 페이지에는 실행 가능한 에디터가 있습니다 - 편집하고 실행하면 결과를 바로 볼 수 있습니다.

작성자 Kevin Spektor, Co-founder & CTO

Sep 24, 2026 게시됨

text-shadow의 동작 방식

text-shadow는 텍스트의 복사본을 옮기고 흐리게 해서 뒤에 그려요. 가로 오프셋, 세로 오프셋, 선택적인 흐림, 색을 줘요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 36px; font-weight: 700; color: #111827; }
    p { margin: 12px 0; }
    .hard { text-shadow: 3px 3px 0 #f59e0b; }
    .soft { text-shadow: 2px 2px 6px rgb(0 0 0 / 35%); }
  </style>
</head>
<body>
  <p class="hard">Hard shadow</p>
  <p class="soft">Soft shadow</p>
</body>
</html>

3px 3px 0 #f59e0b는 오른쪽으로 3px(물리적 방향이라 어떤 글쓰기 방향에서도 같아요), 아래로 3px, 흐림 없음, 주황색이라는 뜻이에요. 두 번째 그림자는 6px 흐리고 반투명 검정을 써요. 은은한 입체감을 주는 흔한 방법이에요.

문법

text-shadow: <offset-x> <offset-y> <blur-radius>? <color>?;

값	필수	뜻
offset-x	예	양수면 그림자가 오른쪽으로, 음수면 왼쪽으로 가요
offset-y	예	양수면 아래로, 음수면 위로 가요
blur-radius	아니요(기본값 0)	가장자리가 얼마나 부드러운지. 음수는 잘못된 값이에요
color	아니요(기본값은 글자 색)	맨 앞이나 맨 뒤에 올 수 있어요

text-shadow: none은 상속받은 그림자를 없애요. 아래 값을 바꿔서 각 값의 효과를 보세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text shadow tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { font-size: 44px; font-weight: 800; margin: 16px 0; }
  </style>
</head>
<body>
  <label>text-shadow: <input id="val" value="4px 4px 8px #2563eb" size="28"></label>
  <p id="sample">Shadow</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.textShadow = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).textShadow;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

-4px -4px 0 #16a34a, 0 0 10px red, 그리고 쉼표로 구분한 그림자 두 개를 넣어 보세요.

여러 그림자: 글로우, 외곽선, 3D

쉼표로 그림자를 겹치고, 첫 번째 그림자가 맨 위에 그려져요. 이 규칙 하나로 세 가지 효과가 나와요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Stacked shadows</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 40px; font-weight: 800; margin: 0; }
    div { padding: 12px 16px; }
    .neon {
      background: #111827; color: #eff6ff;
      text-shadow: 0 0 4px #93c5fd, 0 0 12px #3b82f6, 0 0 24px #2563eb;
    }
    .outline {
      color: #ffffff;
      text-shadow: -2px -2px 0 #111827, 2px -2px 0 #111827,
                   -2px 2px 0 #111827, 2px 2px 0 #111827;
    }
    .deep {
      color: #f59e0b;
      text-shadow: 1px 1px 0 #b45309, 2px 2px 0 #b45309,
                   3px 3px 0 #b45309, 4px 4px 0 #92400e;
    }
  </style>
</head>
<body>
  <div class="neon">Neon glow</div>
  <div class="outline">Outlined</div>
  <div class="deep">3D text</div>
</body>
</html>

글로우: 오프셋은 0, 흐림은 점점 크게, 어두운 배경 위에.
외곽선: 대각선마다 하나씩 흐림 없는 그림자 네 개. 얇은 외곽선에는 통하지만, 두껍고 고른 외곽선에는 -webkit-text-stroke: 2px #111827(접두사가 있지만 모든 최신 브라우저에서 지원해요)가 대신 글자 가장자리에 선을 그려요.
3D: 흐림 없는 그림자를 1px씩 더 멀리 이어 붙여서 글자가 튀어나와 보이게 해요.

복잡한 배경에서 텍스트를 읽기 좋게 하기

사진이나 무늬 위의 흰 텍스트는 배경이 밝은 곳에서 가장자리가 사라져요. 부드럽고 어두운 그림자를 주면 눈에 보이는 상자 없이 가장자리가 되살아나요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Readable on a pattern</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .hero {
      padding: 32px 16px;
      background: repeating-linear-gradient(45deg, #fde68a 0 20px, #ffffff 20px 40px);
      font-size: 32px; font-weight: 800; color: #ffffff;
    }
    .with { text-shadow: 0 1px 3px rgb(0 0 0 / 70%), 0 0 12px rgb(0 0 0 / 40%); }
  </style>
</head>
<body>
  <div class="hero">Without a shadow</div>
  <div class="hero with">With a shadow</div>
</body>
</html>

그림자는 도움이 되지만 명도 대비를 보장하지는 않아요. 이미지 위의 긴 텍스트에는 텍스트 뒤에 단색이나 그라데이션 오버레이도 추가하세요.

text-shadow와 box-shadow 비교

	text-shadow	box-shadow
따라가는 모양	글자 모양	요소의 상자(와 border radius)
spread 값	없어요	있어요
`inset`	없어요	있어요
쉼표로 여러 개	돼요	돼요

카드와 버튼의 그림자는 box-shadow를 보세요.

자주 하는 실수

본문 텍스트에 진하고 무거운 그림자. 글자 모양이 흐려져요. 그림자는 제목과 짧은 레이블에만 쓰세요.
두 번째 오프셋 빠뜨리기. text-shadow: 2px #000은 잘못된 값이에요. 두 오프셋 모두 필수예요.
음수 흐림. 잘못된 값이라 선언 전체가 버려져요.
그림자가 공간을 차지할 거라고 기대하기. 그려지기만 해요. 큰 그림자는 다음 줄과 겹치거나 overflow: hidden에 잘릴 수 있어요.
밝은 배경의 글로우 효과. 흰 배경 위의 밝은 글로우는 보이지 않아요. 글로우에는 어두운 배경이 필요해요.

자주 묻는 질문

text-shadow의 문법은 어떻게 되나요?

text-shadow: offset-x offset-y blur-radius color;예요. 예를 들면 text-shadow: 2px 2px 4px rgb(0 0 0 / 40%);예요. 두 오프셋은 필수이고, 흐림의 기본값은 0, 색의 기본값은 글자 색이에요.

텍스트 그림자를 여러 개 넣으려면 어떻게 하나요?

그림자를 쉼표로 구분해요. text-shadow: 0 0 4px #fff, 0 0 12px #2563eb; 첫 번째 그림자가 뒤의 그림자들 위에 그려져요.

텍스트에 글로우 효과는 어떻게 만드나요?

오프셋 없이 흐림만 있는 그림자를 쓰고, 흐림을 점점 키운 그림자를 여러 개 겹치는 경우가 많아요. text-shadow: 0 0 4px #60a5fa, 0 0 12px #2563eb; 어두운 배경에서는 네온 글로우처럼 보여요.

text-shadow에도 box-shadow처럼 spread 값이 있나요?

없어요. text-shadow에는 spread도, inset 키워드도 없어요. 글자 둘레의 그림자를 두껍게 하려면 그림자를 여러 개 겹치거나, 외곽선에는 -webkit-text-stroke를 쓰세요.

text-shadow가 레이아웃에 영향을 주나요?

아니요. 그림자는 그려지기만 하고 공간을 차지하지 않으며 주변 콘텐츠를 움직이지 않아요. 그래서 큰 그림자는 근처 요소와 겹칠 수 있어요.