CSS에서는 text-shadow 속성으로 텍스트에, box-shadow 속성으로 요소(박스)에 각각 그림자 효과를 추가할 수 있습니다. 이 두 속성을 활용하면 별도의 이미지 없이도 입체적이고 세련된 디자인을 손쉽게 구현할 수 있습니다.
그림자 속성의 기본 문법
두 속성 모두 아래와 같은 형태로 값을 지정합니다.
- 색상(color) — 그림자의 색을 지정합니다.
- 수평 오프셋(offset-x) — 그림자가 좌우로 이동하는 거리입니다.
- 수직 오프셋(offset-y) — 그림자가 상하로 이동하는 거리입니다.
- 흐림 반경(blur-radius) — 값이 클수록 그림자가 부드럽게 퍼집니다.
예제 코드
다음은 텍스트 그림자와 박스 그림자를 동시에 적용한 CSS 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
h2 {
color: rgb(28, 0, 128);
text-shadow: red 2px 4px 2px;
}
div {
color: white;
text-align: center;
width: 100px;
height: 100px;
background-color: red;
box-shadow: rgb(89, 0, 255) 8px 2px 8px;
}
</style>
</head>
<body>
<h1>Shadow effect example</h1>
<h2>Text shadows</h2>
<div>BOX SHADOW</div>
</body>
</html>코드 설명
h2요소에는text-shadow: red 2px 4px 2px;가 적용되어, 빨간색 그림자가 오른쪽으로 2px, 아래로 4px 이동하고 2px만큼 흐려진 효과가 나타납니다.div요소에는box-shadow: rgb(89, 0, 255) 8px 2px 8px;가 적용되어, 보라색 계열의 그림자가 빨간 박스 주변에 둥글게 퍼지며 입체감을 더합니다.
실행 결과
위 코드를 실행하면 제목 텍스트에는 붉은 그림자가, 빨간 사각형 박스에는 보라색 부드러운 그림자가 적용된 화면이 출력됩니다.
추가 팁
그림자 효과를 더욱 다양하게 활용하고 싶다면 다음 방법들도 참고해 보세요.
- 여러 개의 그림자 중첩: 쉼표(,)로 구분하여 여러 그림자를 한 번에 적용할 수 있습니다. 예:
box-shadow: 2px 2px 4px gray, -2px -2px 4px lightgray; - inset 키워드:
box-shadow에inset을 사용하면 요소 내부에 그림자가 생겨 눌린 듯한 효과를 만들 수 있습니다. - 투명도 조절:
rgba()색상 값을 사용하면 그림자의 투명도를 세밀하게 조절할 수 있습니다.