CSS로 요소를 디자인하다 보면 요소의 테두리 주변에 그림자 효과를 넣고 싶어지는 순간이 찾아옵니다. 예를 들어 이미지 아래에 은은한 그림자를 만들어 입체감을 더하고 싶을 수 있죠.
이럴 때 유용하게 활용할 수 있는 것이 바로 CSS의 box-shadow 속성입니다. box-shadow 속성을 사용하면 요소의 프레임 주변에 다양한 그림자 효과를 손쉽게 추가할 수 있습니다. 이 글에서는 실제 예제와 함께 box-shadow 속성으로 웹 요소에 그림자 효과를 적용하는 방법을 단계별로 살펴보겠습니다.
CSS 박스 그림자(box-shadow)란?
box-shadow 속성은 요소에 그림자를 추가하는 CSS 속성입니다. 거의 모든 HTML 요소에 적용할 수 있으며, border-radius로 둥근 모서리를 처리한 요소에도 문제없이 사용할 수 있습니다.
box-shadow 속성의 기본 문법은 다음과 같습니다.
box-shadow: offset-x offset-y blur-radius spread color;
각 값이 어떤 역할을 하는지 하나씩 살펴보겠습니다.
- offset-x: 그림자의 수평(가로) 방향 오프셋 (필수)
- offset-y: 그림자의 수직(세로) 방향 오프셋 (필수)
- blur-radius: 그림자에 적용되는 흐림(blur) 정도 (선택)
- spread: 그림자가 퍼지는 범위, 즉 확산 반경 (선택)
- color: 그림자의 색상 (선택, 기본값은 검정)
문법을 이해했으니 이제 실제 예제를 통해 box-shadow 속성이 어떻게 동작하는지 확인해 보겠습니다. 아래 예제에서는 다음 HTML 요소에 스타일을 적용합니다.
<html>
<div>
<p>This is a box.</p>
</div>
이 요소에는 다음과 같은 기본 스타일이 적용됩니다.
<style>
div {
height: 100px;
width: 200px;
padding: 10px;
background-color: lightblue;
}
</style>
박스의 크기는 너비 200px, 높이 100px이며, 내부 콘텐츠에는 10px의 패딩이 적용되어 있습니다. 즉, 박스 안의 텍스트와 테두리 사이에 10px의 여백이 존재합니다. 배경색은 연한 파란색(lightblue)입니다.
1. 수평·수직 그림자 만들기
box-shadow로 만들 수 있는 가장 기본적인 그림자는 수평 오프셋과 수직 오프셋만 지정한 그림자입니다. 다음은 박스에 수평·수직 그림자를 적용한 예제입니다.
<style>
div {
height: 100px;
width: 200px;
padding: 10px;
background-color: lightblue;
}
div {
box-shadow: 10px 10px;
}
</style>
위 코드에서는 offset-x와 offset-y 값을 모두 10px로 지정했습니다. 그 결과 두 축 방향으로 각각 10픽셀씩 이동한 검은색 드롭 섀도우(drop shadow)가 생성됩니다.
2. 그림자 색상 지정하기
그림자의 색상은 color 값으로 자유롭게 지정할 수 있습니다. 예를 들어 그림자를 연회색(lightgray)으로 바꾸고 싶다면 다음과 같이 작성하면 됩니다.
<style>
div {
height: 100px;
width: 200px;
padding: 10px;
background-color: lightblue;
}
div {
box-shadow: 10px 10px lightgray;
}
</style>
이제 박스에는 검은색 대신 연회색 그림자가 적용됩니다.
3. 그림자 흐림 효과(Blur Radius)
blur-radius 값을 추가하면 그림자에 부드러운 흐림 효과를 줄 수 있습니다. 예를 들어 그림자를 살짝 흐릿하게 만들고 싶다면 3px의 블러 값을 지정하면 됩니다.
<style>
div {
height: 100px;
width: 200px;
padding: 10px;
background-color: lightblue;
}
div {
box-shadow: 10px 10px 3px lightgray;
}
</style>
이전 예제와 비슷해 보이지만, 그림자를 자세히 보면 가장자리가 부드럽게 흐려진 것을 확인할 수 있습니다.
4. 그림자 확산 효과(Spread)
spread 값을 사용하면 그림자가 모든 방향으로 얼마나 퍼질지 지정할 수 있습니다. 그림자를 자기 자신을 기준으로 5px씩 확장하고 싶다면 다음 코드를 사용합니다.
<style>
div {
height: 100px;
width: 200px;
padding: 10px;
background-color: lightblue;
}
div {
box-shadow: 10px 10px 5px 5px lightgray;
}
</style>
이 예제에서 그림자가 조금 더 크게 보이는 이유는 spread 값으로 인해 그림자가 5px 확장되었기 때문입니다.
참고로 box-shadow 속성에 지정하는 값들은 반드시 다음 순서대로 작성해야 합니다.
- offset-x (수평 오프셋)
- offset-y (수직 오프셋)
- blur-radius (흐림 반경)
- spread (확산 반경)
- color (색상)
5. 여러 개의 그림자 추가하기
box-shadow 속성은 하나의 요소에 여러 개의 그림자를 동시에 적용할 수도 있습니다. 여러 그림자를 추가하려면 각 그림자를 쉼표(,)로 구분하면 됩니다.
box-shadow: shadow1, shadow2;
주의할 점은, 여러 그림자를 사용할 때 각 그림자의 오프셋 값을 서로 다르게 지정해야 한다는 것입니다. 오프셋 값이 같으면 그림자들이 완전히 겹쳐서 맨 앞에 선언된 첫 번째 그림자만 화면에 나타나게 됩니다.
예를 들어 박스 뒤에 연회색 그림자와 분홍색 그림자를 동시에 만들고 싶다면 다음과 같이 작성할 수 있습니다.
<style>
div {
height: 100px;
width: 200px;
padding: 10px;
background-color: lightblue;
}
div {
box-shadow: 5px 5px lightgray, 12px 12px pink;
}
</style>
오프셋이 서로 다르기 때문에 연회색 그림자와 분홍색 그림자가 각각 다른 위치에 나타나는 것을 확인할 수 있습니다.
6. 내부 그림자(Inset Shadow)
inset 키워드를 사용하면 그림자가 요소 바깥이 아니라 안쪽에 나타나도록 설정할 수 있습니다. 연회색 그림자를 박스 내부에 표시하고 싶다면 다음과 같이 작성합니다.
<style>
div {
height: 100px;
width: 200px;
padding: 10px;
background-color: lightblue;
}
div {
box-shadow: 5px 5px lightgray inset;
}
</style>
inset 키워드 덕분에 그림자가 바깥쪽 그림자에서 안쪽 그림자로 전환되는 것을 확인할 수 있습니다.
box-shadow 속성 정리표
CSS box-shadow 속성과 함께 사용할 수 있는 주요 값들을 표로 정리하면 다음과 같습니다.
| 속성 | 설명 |
| offset-x | 그림자의 수평(x축) 방향 오프셋 |
| offset-y | 그림자의 수직(y축) 방향 오프셋 |
| blur | 그림자의 흐림 반경 |
| spread | 그림자의 확산 반경 |
| color | 그림자의 색상 |
| inset | 그림자를 요소 내부에 표시하도록 변경 |
| inherit | 부모 요소의 그림자 설정을 상속 |
마무리
CSS box-shadow 속성은 HTML 요소에 그림자 효과를 추가할 때 사용하는 강력한 도구입니다. offset-x, offset-y부터 blur, spread, color, inset까지 다양한 값을 조합하면 원하는 분위기의 그림자를 자유롭게 연출할 수 있습니다.
이 글에서는 몇 가지 예제를 통해 box-shadow 속성으로 커스텀 그림자를 만드는 방법을 알아보았습니다. 이제 여러분도 전문 웹 개발자처럼 멋진 CSS 그림자 효과를 직접 만들어 볼 차례입니다!