CSS filter 속성 완벽 가이드: blur부터 hue-rotate까지

CSS filter 속성은 개발자들이 한 번쯤 마주치고는 "신기하네" 하고 잊어버리는 속성 중 하나입니다. 그러다 포토샵에서 한 시간을 소비한 뒤에야, CSS 네 줄로 해결할 수 있었다는 걸 깨닫게 됩니다.

filter 속성은 blur, grayscale, brightness, contrast, sepia, hue-rotate 등의 그래픽 효과를 이미지 파일을 수정하거나 Canvas API를 사용하지 않고 순수 CSS로 적용합니다. 이미지뿐 아니라 모든 HTML 요소에 작동하고, 여러 효과를 조합하거나 transition으로 애니메이션하기도 쉽습니다.

CSS Filter Generator를 사용하면 각 값을 시각적으로 조정하며 결과를 실시간으로 확인하고 바로 CSS를 복사할 수 있습니다. 이 글에서는 각 필터가 실제로 어떻게 쓰이는지 살펴봅니다.

filter 속성의 작동 방식

기술적으로 CSS filter는 SVG 필터 효과를 요소의 렌더링 출력에 적용합니다. 하지만 SVG를 직접 다룰 필요는 없습니다. 여러 필터는 공백으로 구분하여 왼쪽부터 오른쪽 순서로 적용됩니다:

img {
  filter: grayscale(1) brightness(1.1);
}

중요한 점은 filter가 요소와 그 모든 자식에 적용된다는 것입니다. 카드에 filter: blur(4px)를 적용하면 카드 안의 텍스트까지 모두 흐려집니다. 배경 이미지만 흐리게 하고 싶다면 별도의 접근이 필요합니다.

각 필터와 실제 활용 사례

blur()

가장 시각적으로 뚜렷한 필터입니다. 픽셀 단위로 가우시안 블러를 적용합니다.

.background-image {
  filter: blur(8px);
}

활용 사례: 배경 이미지 블러 처리. 히어로 섹션에서 배경 이미지만 흐리게 하고 내용은 선명하게 유지하고 싶을 때:

.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('/hero.jpg');
  background-size: cover;
  filter: blur(6px);
  transform: scale(1.05); /* 블러된 가장자리가 보이지 않도록 */
  z-index: 0;
}

scale(1.05) 트릭은 블러 처리된 가장자리가 화면에 노출되지 않도록 해주는 디테일입니다.

활용 사례: 로딩 플레이스홀더. 저해상도 이미지를 블러 처리했다가 원본이 로드되면 선명하게 전환하는 방식입니다.

grayscale()

요소의 색상을 흑백으로 변환합니다. 1이 완전 흑백, 0이 원본입니다.

활용 사례: 비활성화 상태 표현. 불투명도만으로는 부족할 때 grayscale과 조합하면 더 명확하게 비활성 상태를 전달할 수 있습니다:

.product-card.disabled img {
  filter: grayscale(1);
  opacity: 0.7;
}

활용 사례: hover 시 컬러 전환. 기본은 흑백, hover 시 컬러로 전환되는 효과는 포트폴리오와 팀 소개 페이지에서 자주 사용됩니다:

.team-photo {
  filter: grayscale(1);
  transition: filter 0.4s ease;
}

.team-photo:hover {
  filter: grayscale(0);
}

brightness()와 contrast()

brightness()는 밝기를 조정합니다. 1이 원본, 1 미만은 어두워지고 1 초과는 밝아집니다. contrast()는 대비를 조정합니다.

두 값을 조합하면 이미지의 분위기를 크게 바꿀 수 있습니다:

/* 강렬하고 펀치감 있는 룩 */
.editorial-image {
  filter: brightness(1.05) contrast(1.4);
}

/* 부드럽고 빈티지한 룩 */
.vintage-image {
  filter: brightness(1.1) contrast(0.85) sepia(0.3);
}

활용 사례: 버튼 인터랙션 피드백. 별도 이미지나 오버레이 없이 brightness만으로 hover/press 피드백을 줄 수 있습니다:

.cta-button {
  transition: filter 0.15s ease;
}

.cta-button:hover {
  filter: brightness(1.1);
}

.cta-button:active {
  filter: brightness(0.9);
}

sepia()

모든 색상에 따뜻한 갈색-노란색 톤을 입혀 오래된 사진 느낌을 만듭니다.

.retro-photo {
  filter: sepia(0.8) brightness(1.05) contrast(0.9);
}

CSS에서 완전히 처리되므로 이미지 파일을 별도로 만들 필요 없이 테마 전환이 가능합니다.

hue-rotate()

모든 색상의 색조를 지정된 각도만큼 회전시킵니다. 채도와 밝기는 유지하면서 색조만 바뀌는 것이 특징입니다.

활용 사례: 단일 이미지로 여러 테마 구현. 색상 테마별로 별도의 에셋 없이 아이콘 색상을 변경할 수 있습니다:

.theme-blue .logo-icon { filter: hue-rotate(0deg); }
.theme-purple .logo-icon { filter: hue-rotate(60deg); }
.theme-green .logo-icon { filter: hue-rotate(120deg); }

활용 사례: 무지개 애니메이션 효과.

@keyframes rainbow {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(360deg); }
}

.rainbow-element {
  animation: rainbow 4s linear infinite;
}

drop-shadow()

요소의 실제 형태를 따라 그림자를 적용합니다. box-shadow와의 핵심 차이점은 투명 PNG나 SVG처럼 직사각형이 아닌 형태에서도 올바르게 작동한다는 점입니다.

img {
  filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.4));
}

투명 배경의 PNG에 box-shadow를 적용하면 사각형 그림자가 생기는 문제를 drop-shadow()로 해결할 수 있습니다.

invert()

모든 색상을 반전시킵니다. 다크 모드 아이콘 대응에 유용합니다:

@media (prefers-color-scheme: dark) {
  .icon {
    filter: invert(1);
  }
}

단색 아이콘에서는 신뢰할 수 있는 방법입니다.

filter vs. backdrop-filter

두 속성을 혼동하는 경우가 많습니다:

• filter: 요소 자체와 그 내용에 효과를 적용합니다.
• backdrop-filter: 요소 뒤에 있는 영역에 효과를 적용합니다. 요소 자체는 정상적으로 렌더링됩니다.

/* frosted glass 패널 */
.glass-panel {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari용 */
}

-webkit-backdrop-filter는 2026년 초 기준으로 Safari가 여전히 요구합니다. 항상 함께 작성하세요.

filter 애니메이션

필터는 transition과 animation으로 애니메이션할 수 있으며, 잘 활용하면 만족스러운 마이크로 인터랙션을 만들 수 있습니다.

/* 컬러 reveal 효과 */
.portfolio-item img {
  filter: grayscale(1) brightness(0.9);
  transition: filter 0.4s ease;
}

.portfolio-item:hover img {
  filter: grayscale(0) brightness(1);
}

/* blur-in 등장 효과 */
@keyframes blurIn {
  from {
    filter: blur(12px);
    opacity: 0;
  }
  to {
    filter: blur(0px);
    opacity: 1;
  }
}

.hero-content {
  animation: blurIn 0.8s ease-out forwards;
}

성능 고려사항

CSS filter는 GPU 가속을 사용하지만 주의할 점이 있습니다:

• blur()가 가장 비쌉니다. 반경이 클수록, 요소가 클수록 비용이 증가합니다.
• 큰 요소에 filter를 애니메이션하면 중급형 모바일 기기에서 프레임 드롭이 생길 수 있습니다.
• 필터 조합은 비용이 누적됩니다. 체인의 각 필터가 순서대로 적용됩니다.
• will-change: filter는 필요할 때만 사용하세요. GPU 메모리를 소비합니다.

마무리

CSS filter는 이미지 편집 기능처럼 보여서 스타일링 도구로 잘 인식되지 않습니다. 하지만 스타일링 기본 요소로 생각하기 시작하면 활용 범위가 넓어집니다.

비활성 상태를 위한 grayscale 패턴, 형태를 따르는 drop-shadow, 테마 적용을 위한 hue-rotate, frosted glass를 위한 backdrop-filter — 이 모두가 현대 CSS에서 실질적으로 유용한 기법입니다.

CSS Filter Generator로 각 필터가 실제 이미지에 어떤 영향을 주는지 직접 확인해보세요. 한 번 눈으로 보고 나면 API가 자연스럽게 이해되고, 더 많은 곳에서 활용할 수 있게 됩니다.