box-shadow 속성의 이해

box-shadow 속성은
요소 박스에 그림자 효과를 적용하는 속성입니다.

  • 이 속성의 특징 및 구현 방법,
  • 특히 여러 개를 사용하는 방법에 대해 다루겠습니다.
  • 그리고, 다양한 예제를 통해 box-shadow를 효과적으로 활용하는 방법을 살펴보겠습니다.
CSS 데모: box-shadow 데모 버튼을 클릭해 보세요!

텍스트 문자에 그림자 효과를 적용하려면 text-shadow 속성을 사용하세요.

box-shadow 속성의 형식은 다음과 같습니다.

구문

CSS 
/*
 * <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;

값

box-shadow 속성의 값
none 초깃값임.
그림자 효과가 없습니다.
<color> 옵션.
그림자 색상 값입니다.
초깃값은 currentcolor (현재 글자색)입니다.
이 값은 <offset-x>, <offset-y>, <blur-radius>, <spread-radius> 사이에 올 수 없습니다.
<offset-x> <offset-y> 필수.
이 길이 값들은 요소 박스로부터 그림자의 거리를 지정합니다.
  • <offset-x>는 가로 축의 수평 거리를 지정합니다. 음수 값은 요소 박스 왼쪽에 그림자를 배치합니다.
  • <offset-y>는 세로 축의 수직 거리를 지정합니다. 음수 값은 요소 박스 위에 그림자를 배치합니다.
<offset-x>과 <offset-y>는 띄어 쓰기로 구분하며, 이 사이에는 <color>, <blur-radius>, <spread-radius>, <inset>가 올 수 없습니다. 이 두 길이 값에는 %단위의 길이 값을 사용할 수 없습니다.
<blur-radius> 옵션.
흐림 효과를 지정합니다. 크기의 기준은 흐림 효과를 원의 반지름으로 측정하며, 값이 높을수록 흐림 효과가 커집니다. 즉, 그림자가 더 넓어지고 가벼워 집니다. 음수 값이나 % 단위의 길이 값을 사용할 수 없습니다.
초깃값은 0입니다.
이 값은 반드시 <offset-y> 바로 뒤에서 지정해야 합니다.
<spread-radius> 옵션.
그림자 확대와 축소를 지정합니다.
양수 값은 그림자를 확장하고 더 크게 만들고, 음수 값은 그림자를 축소합니다.
초깃값은 0입니다.
이 값은 반드시 <blur-radius> 바로 뒤에서 지정해야 합니다.
box-shadow의 <spread-radius> 값 활용 팁을 확인해 보세요!
<inset> 옵션.
그림자를 박스 외부 그림자에서 박스 내부 그림자로 변경합니다.
이 값이 지정되지 않았을 경우 박스 외부 그림자를 구현합니다.
이 값은 <offset-x>, <offset-y>, <blur-radius>, <spread-radius> 사이에 올 수 없습니다.

형식 정의

box-shadow 속성의 형식 정의
초깃값 none
길이 값에 퍼센트(%) 사용 해당사항 없음
적용 요소 모든 요소
상속 아니오
애니메이션 <inset>을 제외한
<offset-x>, <offset-y>, <blur-radius>, <spread-radius>, <color>

box-shadow 속성의 특징

box-shadow 속성은 다음과 같은 특징이 있습니다.

  1. text-shadow와는 달리 그림자 모양이 잘립니다.
  2. text-shadow와 마찬가지로 레이아웃에 영향을 주지 않습니다.
  3. border-radius의 영향을 받습니다.

이 세 가지 특징에 대해 자세히 살펴보겠습니다.

text-shadow와는 달리 그림자 모양이 잘립니다.

text-shadow는 텍스트의 그림자 모양이 잘리지 않지만, box-shadow는 요소 박스의 모양으로 그림자가 잘립니다.

CSS text-shadow 속성

다음의 구현 예제으로 살펴 보겠습니다.

HTML 
<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>
실제 적용된 모습

위 구현 예제를 보면 text-shadow는 그림자 모양으로 잘리지 않으며, 텍스트가 투명하거나 부분적으로 투명한 경우 비쳐 보이는 것을 볼 수 있습니다.

하지만, 다음의 구현 예제를 보면 박스를 투명으로 지정하여 비쳐 보인 box-shadow의 그림자 모양이 박스의 모양으로 잘려 있는 것을 알 수 있습니다.

HTML 
<style>
    .box {
        width: 200px;
        height: 100px;
        background-color: transparent;
        box-shadow: 10px 10px 10px yellowgreen;
    }
</style>
<div class="box">BOX</div>
실제 적용된 모습

text-shadow와 마찬가지로 레이아웃에 영향을 주지 않습니다.

text-shadow나 box-shadow는 그림자가 커서 주변 요소에 닿거나 넘치더라도 레이아웃에 영향을 주지 않습니다. 이는 오버플로(overflow, 경계를 넘어섬)하더라도 스크롤에 영향을 주지 않습니다.

HTML 
<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>
실제 적용된 모습

위 구현 예제를 보면 .text-2의 text-shadow가 위에 있는 .text-1를 넘처서 구현되었지만 .text-1이나 .text-2가 밀리거나 벌어지는 등의 현상이 발생하지 않습니다. text-shadow는 주변의 레이아웃에 영향을 주지 않습니다.

아래의 구현 예제에서도 box-shadow가 text-shadow와 마찬가지로 주변의 레이아웃에 영향을 주지 않는 것을 보여줍니다.

HTML 
<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>
실제 적용된 모습

border-radius의 영향을 받습니다.

box-shadow는 해당 요소 박스에 border-radius의 영향을 받아 둥글게 클리핑됩니다. 그림자의 모양은 둥글게 잘린 요소의 경계선을 따르게 됩니다.

HTML 
<style>
    .box {
        width: 200px;
        height: 100px;
        border-radius: 20px;
        background-color: gold;
        box-shadow: 10px 10px 15px;
    }
</style>
<div class="box"></div>
실제 적용된 모습

위 구현된 예제를 보면 요소 박스에 border-radius: 20px;로 지정하여 요소 박스 각각의 코너에 라운드 효과를 20px씩 주었습니다. 이 때 각각의 코너에 box-shadow로 지정한 그림자 효과에도 라운드 효과가 적용되는 것을 볼 수 있습니다. 이것은 inset으로 그림자 효과를 박스 내부 그림자로 지정해도 동일하게 적용됩니다.

box-shadow에는 text-shadow에 없는 <spread-radius> 값이 옵션으로 있어서 그림자를 확대하거나 축소할 수 있습니다.
<spread-radius> 값이 양수이면 그림자를 확장하고 더 크게 만들고, 음수 값은 그림자를 축소합니다. 그렇다면 <spread-radius> 값은 어디에 활용할까?

언뜻 보기에는 별 활용 가치가 없어 보이지만 이 값을 음수 값으로 적용해서 그림자를 축소하면 심미적으로 그림자 스타일을 더 좋게 꾸밀 수 있습니다.

다음의 활용 예제로 살펴 보겠습니다.

HTML 
<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>
실제 적용된 모습 요소 박스에 마우스를 올려 보세요!

위 예제는 <spread-radius> 값을 음수 값으로 지정해서 심미적으로 그림자 스타일을 더 좋게 꾸미는 대표적인 사례입니다.

box-shadow로 여러 개의 그림자 효과 주기

box-shadow 속성으로 여러 개의 그림자 효과를 주려면 값을 콤마(,)로 구분해서 추가할 수 있습니다.
그림자 효과는 순서대로 앞에서 뒤로 적용되며, 첫 번째 그림자가 맨 위에 옵니다.

HTML 
<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>
실제 적용된 모습

위 구현 예제를 보면 그림자 효과가 순서대로 red, green, blue로 앞에서 뒤로 적용되며, 첫 번째 그림자인 red가 맨 위에 옵니다.

브라우저 호환성

box-shadow 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
box-shadow 10 12 4 5.1

명세서

box-shadow 속성의 명세서 사양
명세서 사양
box-shadow CSS Backgrounds and Borders Module Level 3
#box-shadow

참고문헌

같이 보기