CSS 데모: text-shadow 데모 버튼을 클릭해 보세요!
/*
 * <offset-x> (필수): x축(가로 축) 거리(양수, 0, 음수 적용 가능). 길이 값(% 단위 사용 금지)
 * <offset-y> (필수): y축(세로 축) 거리(양수, 0, 음수 적용 가능). 길이 값(% 단위 사용 금지)
 * <blur-radius> (옵션): 흐림 효과. 크기의 기준은 흐림 효과를 원의 반지름으로 측정(양수, 0, 음수 없음).
                        초깃값은 0. 길이 값(% 단위 사용 금지)
 * <color> (옵션): 그림자 색상 값. 초깃값은 currentColor(현재 글자 색)
*/

/* 주의! <offset-x>과 <offset-y> 사이에 <blur-radius>나 <color>가 올 수 없습니다. */
/* 주의! <blur-radius>는 반드시 <offset-y> 바로 뒤에서 지정해야 합니다. */
/* 주의! <color>는 <offset-x>, <offset-y>, <blur-radius> 사이에 올 수 없습니다. */

/* <offset-x> | <offset-y> | <blur-radius> | <color> */
text-shadow: 2px 3px 4px red;

/* <color> | <offset-x> | <offset-y> | <blur-radius> */
text-shadow: red 2px 0 4px;

/* <offset-x> | <offset-y> | <color> */
text-shadow: 5px 5px #00a0e9;

/* <color> | <offset-x> | <offset-y> */
text-shadow: green 2px 5px;

/* <offset-x> | <offset-y>
   <color>와 <blur-radius>는 초깃값 적용 */
text-shadow: 5px 10px;

/* 여러 개의 그림자 효과는 값을 콤마(,)로 구분해서 추가
   그림자 효과는 순서대로 앞에서 뒤로 적용. 첫 번째 그림자가 맨 위에 옵니다. */
text-shadow: red 2px 0 4px, blue 4px 0 4px, green 6px 8px;

/* 초깃값 */
text-shadow: none; /* 그림자 효과가 없다는 의미 */

/* 글로벌 값 */
text-shadow: inherit;
text-shadow: initial;
text-shadow: revert;
text-shadow: revert-layer;
text-shadow: unset;
<style>
    .box {
        width: 200px;
        height: 100px;
        background-color: transparent;
        box-shadow: 10px 10px 10px yellowgreen;
    }
</style>
<div class="box">BOX</div>
실제 적용된 모습
<style>
    .text {
        font-size: 70px;
        font-weight: 900;
        color: rgba(0, 0, 0, 0.4);
        text-shadow: 5px 5px red;
    }
</style>
<p class="text">텍스트</p>
실제 적용된 모습
<style>
    .box {
        width: 200px;
        height: 100px;
        background-color: gold;
    }
    .box-1 {
        margin-bottom: 25px;
    }
    .box-2 {
        box-shadow: 0 -50px 20px rgba(0, 0, 0, 0.7);
}
</style>
<div class="box box-1">BOX 1</div>
<div class="box box-2">BOX 2</div>
실제 적용된 모습
<style>
    .text {
        font-size: 70px;
        font-weight: 900;
        color: gold;
    }
    .text-1 {
        margin-bottom: 10px;
    }
    .text-2 {
        text-shadow: 0 -50px 10px rgba(0, 0, 0, 0.4);
    }
</style>
<p class="text text-1">텍스트 1</p>
<p class="text text-2">텍스트 2</p>
실제 적용된 모습
<style>
    .text {
        font-size: 70px;
        font-weight: 900;
        color: gold;
        text-decoration: underline;
        text-shadow: 5px 5px red;
    }
</style>
<p class="text">텍스트</p>
실제 적용된 모습
<style>
    .text {
        font-size: 70px;
        font-weight: 900;
        color: gold;
        text-emphasis: dot;
        text-shadow: 5px 5px red;
    }
</style>
<p class="text">텍스트</p>
실제 적용된 모습
<style>
    .text {
        font-size: 100px;
        font-weight: 900;
        color: gold;
        text-shadow: 7px 7px red,
                     14px 14px green,
                     21px 21px blue;
    }
</style>
<p class="text">가</p>
실제 적용된 모습
text-shadow 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
text-shadow 2 12 3.5 1.1

caniuse.com에서 더 자세한 정보를 확인해 보세요.