CSS 데모: box-shadow 데모 버튼을 클릭해 보세요!
/*
 * <offset-x> (필수): x축(가로 축) 거리(양수, 0, 음수 적용 가능). 길이 값(% 단위 사용 금지)
 * <offset-y> (필수): y축(세로 축) 거리(양수, 0, 음수 적용 가능). 길이 값(% 단위 사용 금지)
 * <blur-radius> (옵션): 흐림 효과. 크기의 기준은 흐림 효과를 원의 반지름으로 측정(양수, 0, 음수 없음).
                        초깃값은 0. 길이 값(% 단위 사용 금지)
 * <spread-radius> (옵션): 그림자 확대와 축소(양수, 0, 음수 적용 가능).
                          양수 값은 그림자를 확장하고 더 크게 만들고, 음수 값은 그림자를 축소
 * <color> (옵션): 그림자 색상 값. 초깃값은 currentcolor(현재 글자색)
 * <inset> (옵션): 그림자를 박스 외부 그림자에서 박스 내부 그림자로 변경
*/

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

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

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

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

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

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

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

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

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

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

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

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

/* 글로벌 값 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: revert;
box-shadow: revert-layer;
box-shadow: unset;
<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: transparent;
        box-shadow: 10px 10px 10px yellowgreen;
    }
</style>
<div class="box">BOX</div>
실제 적용된 모습
<style>
    .text {
        font-size: 70px;
        font-weight: 900;
        color: gold;
        margin: 0;
    }
    .text-2 {
        margin: 0;
        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>
    .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>
    .box {
        width: 200px;
        height: 100px;
        border-radius: 20px;
        background-color: gold;
        box-shadow: 10px 10px 15px;
    }
</style>
<div class="box"></div>
실제 적용된 모습
<style>
    .box {
        max-width: 250px;
        height: 200px;
        border-radius: 15px;
        background-color: white;
        box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
        transition: box-shadow 0.2s;
    }
    .box:hover {
        box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
    }
</style>
<div class="box"></div>
실제 적용된 모습 요소 박스에 마우스를 올려 보세요!
<style>
    .box {
        max-width: 250px;
        height: 200px;
        border-radius: 15px;
        border: 1px solid;
        background-color: white;
        box-shadow: 7px 7px red,
                     14px 14px green,
                     21px 21px blue;
    }
</style>
<div class="box"></div>
실제 적용된 모습