한 줄 요약 — 같은 카드 한 장도 재질을 바꾸면 인상이 완전히 달라진다. box-shadow는 카드를 종이처럼 바닥에서 살짝 띄우고, backdrop-filter는 뒤가 비치는 유리 패널로 만들고, clip-path는 사각형이라는 틀에서 벗어나 원·마름모 같은 도형으로 잘라낸다. 오늘은 이 세 가지를 같은 카드에 차례로 입혀 보며 차이를 눈으로 비교한다.

학습 목표#

  • box-shadow의 다섯 값(x, y, 흐림, 번짐, 색)을 이해하고 자연스러운 카드 그림자를 만들 수 있다.
  • text-shadow로 글자에 입체감을 줄 수 있다.
  • filter와 backdrop-filter의 차이를 구분하고 유리 느낌을 낼 수 있다.
  • clip-path로 요소를 원하는 도형으로 잘라낼 수 있다.
  • 그림자·유리·도형에서 초보자가 자주 빠지는 실수를 피할 수 있다.

오늘의 비유 — 같은 카드를 종이·광택지·유리 패널로#

문구점에 가면 같은 크기의 카드도 재질이 여러 가지다. 평범한 종이 카드는 책상에 두면 그림자가 생겨 살짝 떠 보인다. 코팅한 광택지 카드는 빛을 받아 글자가 또렷하게 도드라진다. 투명한 아크릴·유리 패널은 뒤에 있는 책상 무늬가 흐릿하게 비쳐 보인다. 가위로 모서리를 둥글게 오리면 더 이상 사각형 카드가 아니다.

CSS도 똑같다. 마크업으로 만든 카드는 기본적으로 납작한 사각형이지만, box-shadow로 바닥에서 띄워 종이처럼 만들고, backdrop-filter로 뒤가 비치는 유리 패널로 바꾸고, clip-path로 가위질하듯 다른 도형으로 잘라낼 수 있다. 카드의 내용은 그대로 두고 재질만 갈아 끼우는 셈이다.

핵심 개념#

box-shadow — 카드를 바닥에서 띄우기#

box-shadow는 다섯 개의 값을 순서대로 받는다. 가로 위치, 세로 위치, 흐림 정도, 번짐 정도, 색이다.

.card {
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.12);
  /*          ┃ ┃    ┃    ┃  ┗ 그림자 색(보통 검정 + 낮은 투명도)
              ┃ ┃    ┃    ┗ 번짐(spread): 그림자를 더 키우거나 줄임
              ┃ ┃    ┗ 흐림(blur): 클수록 부드럽고 멀어 보임
              ┃ ┗ 세로 위치: 양수면 아래로 → 빛이 위에서 온 느낌
              ┗ 가로 위치 */
}

자연스러운 카드 그림자의 핵심은 "빛은 위에서 온다"는 현실 감각이다. 세로 값을 양수로 줘 그림자를 아래로 깔고, 흐림을 넉넉히 줘 가장자리를 부드럽게 만든다. 색은 검정을 그대로 쓰지 말고 rgba로 투명도를 낮게 준다. 종이 카드 밑 그림자도 새까맣지 않고 옅은 회색인 것과 같다.

text-shadow — 글자에 입체감#

text-shadow는 글자에 붙는 그림자다. 값은 box-shadow와 비슷하지만 번짐(spread)이 없어 네 값(x, y, 흐림, 색)만 받는다.

.title {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

광택지 카드의 제목처럼 글자를 배경에서 살짝 띄워 또렷하게 만들 때 쓴다. 그림자가 강하면 촌스러우니 카드 그림자와 마찬가지로 옅게 시작한다.

filter vs backdrop-filter — 자기 자신이냐, 뒤에 있는 것이냐#

이름이 비슷한 두 속성을 헷갈리기 쉽다. 기준은 "무엇을 흐리게/조절하느냐"다.

  • filter는 요소 자기 자신에 효과를 건다. filter: blur(4px)를 주면 그 카드 자체가 흐릿해진다.
  • backdrop-filter는 요소 뒤에 깔린 것에 효과를 건다. 카드는 선명하게 두고, 카드 너머로 비치는 배경만 흐려진다. 유리 패널 너머 책상 무늬가 흐려 보이는 바로 그 느낌이다.
/* 카드 자체가 흐려진다 */
.frosted-card {
  filter: blur(4px);
}

/* 카드는 선명하고, 뒤 배경만 흐려진다 — 유리 느낌 */
.glass-card {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

filter에는 blur() 말고도 brightness()(밝기), grayscale()(흑백), drop-shadow() 등이 있다. drop-shadow()는 box-shadow와 비슷하지만 사각형 박스가 아니라 요소의 실제 모양을 따라 그림자를 그린다. 그래서 뒤에서 배울 clip-path로 자른 도형이나 투명 PNG의 그림자에 어울린다.

clip-path — 사각형 밖으로 잘라내기#

clip-path는 요소를 정해진 도형으로 잘라 그 안만 보이게 한다. 가위로 카드를 오리는 것과 같다. 자주 쓰는 모양은 circle()과 polygon()이다.

.avatar {
  clip-path: circle(50%);          /* 정중앙 기준 원으로 자르기 */
}

.tag {
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
  /* 네 꼭짓점을 비율로 찍어 오른쪽 아래를 비스듬히 자른 도형 */
}

polygon()의 각 점은 가로 세로 쌍이고, %로 주면 요소 크기에 따라 같이 늘고 줄어 반응형에서도 도형이 유지된다.

함께 따라하기 — 카드 3장을 재질만 바꿔 비교하기#

내용이 똑같은 카드 3장을 두고, 각각 종이 그림자·유리 효과·잘린 도형으로 바꿔 차이를 본다.

<div class="stage">
  <article class="card paper">종이처럼 띄운 카드</article>
  <article class="card glass">유리처럼 비치는 카드</article>
  <article class="card clipped">도형으로 자른 카드</article>
</div>

.stage {
  display: flex;
  gap: 20px;
  padding: 40px;
  /* 유리 효과를 보려면 뒤에 무늬가 있어야 한다 */
  background: linear-gradient(135deg, #5b7cfa, #b14de0);
}

.card {
  flex: 1;
  padding: 24px;
  border-radius: 12px;
  color: #1a1a1a;
}

/* 종이: 부드러운 그림자로 바닥에서 띄운다 */
.paper {
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* 유리: 반투명 배경 + 뒤 배경 흐리기 */
.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  color: #fff;
}

/* 도형: 오른쪽 위 모서리를 비스듬히 잘라낸다 */
.clipped {
  background: #fff;
  clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
}

저장하고 열어 보면, 보라-파랑 그라데이션 배경 위에 카드 3장이 나란히 놓인다. 첫 번째 흰 카드는 아래에 옅은 그림자가 깔려 바닥에서 살짝 떠 보인다. 두 번째 카드는 반투명한 흰색이라 뒤 그라데이션이 흐릿하게 비쳐 유리 패널처럼 보인다. 세 번째 카드는 오른쪽 위 모서리가 비스듬히 잘려 더 이상 반듯한 사각형이 아니다.

흔한 실수 3가지#

1. box-shadow를 너무 진하게 줘서 촌스러워진다#

입체감을 욕심내 그림자를 새까맣고 진하게 주면, 종이가 떠 있는 게 아니라 검은 테두리를 두른 것처럼 보인다.

/* (그림자가 새까맣고 흐림이 없어 딱딱한 테두리처럼 보입니다) */
.card {
  box-shadow: 0 0 0 6px #000;
}

현실의 그림자는 새까맣지도, 가장자리가 칼같이 떨어지지도 않는다. 흐림을 넉넉히 주고, 색은 검정에 낮은 투명도를 입혀 옅게 만든다. 더 자연스럽게 하려면 옅은 그림자를 두 겹으로 겹친다.

.card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 6px 16px rgba(0, 0, 0, 0.12);
}

가까운 옅은 그림자와 멀리 퍼지는 옅은 그림자를 함께 두면, 한 겹짜리보다 훨씬 부드럽고 입체적인 카드가 된다.

2. backdrop-filter의 반투명 배경을 잊는다#

backdrop-filter만 주고 카드 배경을 불투명하게 둔 채로, 왜 유리 느낌이 안 나는지 모르는 경우가 흔하다.

/* (배경이 꽉 찬 흰색이라 뒤가 비치지 않아 흐림 효과가 안 보입니다) */
.glass {
  background: #fff;
  backdrop-filter: blur(8px);
}

backdrop-filter는 카드 뒤가 비쳐야 그 비친 부분을 흐리게 만든다. 배경이 불투명하면 비칠 게 없으니 효과가 보이지 않는다. 카드 배경을 rgba나 반투명 색으로 줘 뒤가 살짝 비치게 하고, 더해서 카드 뒤에 무늬나 색이 있어야 흐림이 눈에 띈다. 흰 바탕 위 흰 유리는 흐릿하게 만들 무늬 자체가 없다.

.glass {
  background: rgba(255, 255, 255, 0.2);   /* 뒤가 비치게 */
  backdrop-filter: blur(8px);
}

3. clip-path를 픽셀 값으로만 잡아 반응형이 깨진다#

도형의 꼭짓점을 px로 고정하면, 카드 크기가 바뀔 때 자른 위치가 따라오지 못해 도형이 어긋난다.

/* (카드가 좁아지면 자른 위치가 안쪽으로 밀려 도형이 깨집니다) */
.clipped {
  clip-path: polygon(0 0, 280px 0, 320px 200px, 0 200px);
}

280px은 카드가 320px일 때만 맞는 값이다. 화면이 좁아져 카드가 200px이 되면, 자르는 선이 카드 밖이나 엉뚱한 위치로 간다. 꼭짓점을 %로 주면 카드 크기에 비례해 함께 움직여 어느 폭에서도 같은 모양이 유지된다.

.clipped {
  clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
}

복잡한 도형의 좌표를 손으로 계산하기 어렵다면, "clip path generator" 같은 시각 도구로 점을 끌어 만든 뒤 나온 % 값을 가져다 쓰면 편하다.

오늘 배운 것 체크리스트#

  • box-shadow의 다섯 값을 알고 옅은 그림자로 자연스러운 카드를 만들 수 있다.
  • text-shadow로 글자에 입체감을 줄 수 있다.
  • filter는 자기 자신, backdrop-filter는 뒤 배경에 효과를 건다는 차이를 안다.
  • backdrop-filter에는 반투명 배경과 비칠 무늬가 필요하다는 것을 안다.
  • clip-path를 %로 잡아 반응형에서도 도형이 유지되게 한다.

자주 묻는 질문#

Q. 카드 그림자를 자연스럽게 만들려면 어떻게 해야 하나요?

A. 세 가지를 지키면 대부분 자연스러워집니다. 첫째, 세로 값을 양수로 줘 그림자를 아래로 깔아 "빛이 위에서 온" 느낌을 줍니다. 둘째, 흐림을 넉넉히 주고 색은 검정 대신 rgba(0, 0, 0, 0.1)처럼 투명도가 낮은 옅은 검정을 씁니다. 셋째, 더 부드럽게 하려면 가까운 옅은 그림자와 멀리 퍼지는 옅은 그림자를 두 겹으로 겹칩니다.

Q. 유리 느낌(글라스모피즘) CSS는 어떻게 만드나요?

A. 반투명 배경과 backdrop-filter: blur()를 함께 씁니다. 카드 배경을 rgba(255, 255, 255, 0.2)처럼 반투명으로 주고 backdrop-filter: blur(10px)를 더하면, 카드 뒤에 비치는 배경이 흐려져 유리 패널 같은 느낌이 납니다. 단, 카드 뒤에 색이나 무늬가 있어야 흐림이 눈에 보입니다.

Q. filter와 backdrop-filter는 무엇이 다른가요?

A. filter는 요소 자기 자신에 효과를 걸어 그 요소가 흐려지거나 흑백이 됩니다. backdrop-filter는 요소는 선명하게 두고 그 뒤에 비치는 배경에만 효과를 겁니다. 유리처럼 "나는 선명하고 뒤만 흐린" 효과가 필요하면 backdrop-filter를 씁니다.

다음 시간 예고#

내일은 트랜지션·애니메이션·비주얼을 한데 묶는 작은 컴포넌트 실습으로 넘어간다. 지금까지 익힌 그림자·유리·도형에 호버 전환까지 더해, 손에 잡히는 카드 UI 하나를 처음부터 끝까지 만들어 본다.

더 알아보기#