글자에 그림자 효과를 주는 방법 - text-shadow

텍스트에 그림자 효과를 줄 수 있습니다. 그림자 효과는 본문에서 자주 사용하면
지저분해 보이지만 사이트 제목이나 강조해야 할 글자에 사용하면 글자를 눈에 띄게
할 수 있습니다.

text-shadow

text-shadow는 글자에 그림자 효과를 주어 텍스트를 좀 더 입체적으로 보이게 하는
속성입니다.

기본형

text-shadow : offset-x | offset-y | blur-radius | color | none

offset-x : 그림자의 가로 거리를 정합니다. (필수)

offset-y : 그림자의 세로 거리를 정합니다. (필수)

blur-radius : 번짐 정도를 정합니다. (기본값 0)

color : 그림자 색상을 정합니다.

none : 글림자 효과를 없앱니다.

예제

예제 1

offset-x 속성 값을 증가시키면 그림자의 위치가 오른쪽으로 이동합니다.

<p class="s1">Lorem ipsum</p>
<p class="s2">Lorem ipsum</p>
<p class="s3">Lorem ipsum</p>

.s1 {
  text-shadow: 2px 2px 2px gray;
}
.s2 {
  text-shadow: 4px 2px 2px gray;
}
.s3 {
  text-shadow: 6px 2px 2px gray;
}

class="codepen"
data-default-tab="result"
data-editable="true"
data-preview="true"
data-height="441"
data-pen-title="CSS 글자에 그림자 효과를 주는 방법 text-shadow 예제1"
data-slug-hash="PoNggzE"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

예제 2

offset-y 속성 값을 증가시키면 그림자의 위치가 아래로 이동합니다.

<p class="s1">Lorem ipsum</p>
<p class="s2">Lorem ipsum</p>
<p class="s3">Lorem ipsum</p>

.s1 {
  text-shadow: 2px 2px 2px gray;
}
.s2 {
  text-shadow: 2px 4px 2px gray;
}
.s3 {
  text-shadow: 2px 6px 2px gray;
}

class="codepen"
data-default-tab="result"
data-editable="true"
data-preview="true"
data-height="441"
data-pen-title="CSS 글자에 그림자 효과를 주는 방법 text-shadow 예제2"
data-slug-hash="XWdQQjr"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

예제 3

blur-radius 속성 값을 증가시키면 그림자가 번지고 흐려집니다.

<p class="s1">Lorem ipsum</p>
<p class="s2">Lorem ipsum</p>
<p class="s3">Lorem ipsum</p>

.s1 {
  text-shadow: 2px 2px 2px gray;
}
.s2 {
  text-shadow: 2px 2px 4px gray;
}
.s3 {
  text-shadow: 2px 2px 6px gray;
}

class="codepen"
data-default-tab="result"
data-editable="true"
data-preview="true"
data-height="441"
data-pen-title="CSS 글자에 그림자 효과를 주는 방법 text-shadow 예제3"
data-slug-hash="LYNvvRZ"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

예제 4

그림자 속성 값을 쉼표로 구분하여 여러 번 쓰면 여러 개의 그림자가
생깁니다.

맨 먼저 지정한 그림자 값이 텍스트에 가장 가까히 표시됩니다.

.s1 {
  color: #000;
  text-shadow: 0px 0px 4px #ccc, 0px -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -19px 18px, #f20;
}

class="codepen"
data-default-tab="result"
data-editable="true"
data-preview="true"
data-height="441"
data-pen-title="CSS 글자에 그림자 효과를 주는 방법 text-shadow 예제4"
data-slug-hash="bGpJJwK"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.