[CSS] 그림자와 필터 (Shadows & Filters)

이번 포스팅에서는 [CSS 디자인 이펙트] 파트의 세부 주제인 Box-shadow 다중 중첩과 글래스모피즘에 대하여 상세히 알아보겠습니다.

1. 자연스러운 그림자의 비밀: 다중 box-shadow 겹치기

그림자를 하나만 크고 짙게 주면 매우 촌스럽고 인위적입니다. 애플(Apple)이나 최신 디자인 시스템처럼 부드럽고 자연스러운 그림자는 크기와 투명도가 다른 여러 그림자를 겹쳐서 만듭니다.

.smooth-card {
  /* x, y, blur, spread, color 순서 */
  /* 콤마로 구분하여 작은 그림자부터 넓고 연한 그림자까지 겹쳐서 적용 */
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 4px 12px rgba(0, 0, 0, 0.05),
    0 16px 32px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
}

2. 요즘 대세, 글래스모피즘(Glassmorphism) 구현하기

배경이 유리를 투과하듯 흐려지는 효과는 backdrop-filter 속성 하나면 끝납니다. 주의할 점은 요소 자체의 배경(background)이 반투명한 rgba여야 뒤의 요소가 비치면서 흐려집니다.

.glass-panel {
  background: rgba(255, 255, 255, 0.2); /* 반투명 흰색 배경 */
  
  /* 자신의 뒤에 있는 배경 요소들에게 블러 효과 적용 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari 지원 */
  
  border: 1px solid rgba(255, 255, 255, 0.3); /* 유리광 테두리 */
}

---

지금까지 다중 그림자 기법과 backdrop-filter를 이용한 효과에 대해 살펴보았습니다. 밋밋한 플랫 디자인에 적절한 깊이감을 더해 프리미엄 UI를 완성해 보세요.