정의 및 사용 방법

filter 속성은
요소에 흐림, 색조 조절, 대비 변경 등의 그래픽 필터 효과를 적용합니다.

필터는 CSS에서 제공하는 다양한 필터 함수 값으로 지정하며, 요소 자체의 이미지, 배경, 테두리 등의 렌더링을 조정하는 데 사용됩니다.

기본 예제

HTML 
<img src="example.jpg" src="데모 이미지">
CSS 
img {
    filter: /* value */
}
CSS 라이브 데모: filter 데모 버튼을 클릭해 보세요!

참고하세요!
filter 속성은 요소 자체에 필터를 적용합니다. 반면, backdrop-filter는 요소 배경 뒤로 비춰지는 레이어에 필터를 적용하는 속성입니다.

형식 구문

CSS 
selector {
    filter: none | <filter>
}

구문

CSS 
/* 키워드 값 */
filter: none;

/* 단일한 <filter> 값 */
filter: blur(5px);
filter: brightness(60%);
filter: contrast(40%);
filter: drop-shadow(4px 4px 10px blue);
filter: grayscale(30%);
filter: hue-rotate(150deg);
filter: invert(70%);
filter: opacity(20%);
filter: sepia(90%);
filter: saturate(80%);
filter: url(common-filters.svg#filterid); /* SVG 필터 URL */

/* 여러 개의 값 */
filter: blur(4px) saturate(150%);
filter: blur(4px) saturate(150%) grayscale(30%);
filter: url(common-filters.svg#filterid) blur(4px);
filter: drop-shadow(5px 5px blue) sepia(80%) drop-shadow(-5px -5px blue);

/* 글로벌 값 */
filter: inherit;
filter: initial;
filter: revert;
filter: revert-layer;
filter: unset;

값

filter 속성의 값
none 초깃값임.
어떤 필터 효과도 적용하지 않습니다.
<filter> 하나 이상의 필터 함수를 공백으로 나열합니다.
아래의 'CSS 필터 함수 목록'을 참조하세요.

CSS 필터 함수 목록

-filter 속성에서 사용 가능한 CSS 필터 함수의 목록입니다.
함수 필터 매개변수 유형 기본값, 최솟값, 최댓값
blur() 흐림 효과 길이 단위 기본값: blur(0),
최솟값: blur(0),
최댓값: 제한 없음
brightness() 밝기 조정 숫자 또는 백분율 기본값: brightness(1) 또는 brightness(100%),
최솟값: brightness(0) 또는 brightness(0%),
최댓값: 제한 없음
contrast() 대비 조정 숫자 또는 백분율 기본값: contrast(1) 또는 contrast(100%),
최솟값: brightness(0) 또는 contrast(0%),
최댓값: 제한 없음
drop-shadow() 그림자 효과 그림자 값
(shadow syntax)		 기본값: drop-shadow(0 0 0 currentcolor),
최솟값: 제한 없음,
최댓값: 제한 없음
grayscale() 흑백 효과 숫자 또는 백분율 기본값: grayscale(0) 또는 grayscale(0%),
최솟값: grayscale(0) 또는 grayscale(0%),
최댓값: grayscale(1) 또는 grayscale(100%)
hue-rotate() 색상 회전 각도 단위
(deg, grad, rad, turn)		 기본값: hue-rotate(0deg),
최솟값: 제한 없음,
최댓값: 제한 없음
invert() 색상 반전 숫자 또는 백분율 기본값: invert(0) 또는 invert(0%),
최솟값: invert(0) 또는 invert(0%),
최댓값: invert(1) 또는 invert(100%)
opacity() 투명도 조정 숫자 또는 백분율 기본값: opacity(1) 또는 opacity(100%),
최솟값: opacity(0) 또는 opacity(0%),
최댓값: opacity(1) 또는 opacity(100%)
saturate() 채도 조정 숫자 또는 백분율 기본값: saturate(1) 또는 saturate(100%),
최솟값: saturate(0) 또는 saturate(0%),
최댓값: 제한 없음
sepia() 세피아 효과 숫자 또는 백분율 기본값: sepia(0) 또는 sepia(0%),
최솟값: sepia(0) 또는 sepia(0%),
최댓값: sepia(1) 또는 sepia(100%)
url() SVG 필터 적용 필터가 정의된
SVG 파일의 URL 참조
필터 함수 값에 대한 추가 설명
  • 필터 함수가 최솟값을 갖는 경우, 최솟값 이하의 값을 설정하면 filter 전체 선언이 무효 처리됩니다.
  • 최댓값을 초과하는 값은 문법상 허용되지만, 실제 효과는 최댓값을 설정한 것과 동일하게 적용됩니다. 예를 들어, sepia(400%)는 sepia(100%)와 동일한 효과를 냅니다.
  • 기본값을 지정하면 필터 효과가 적용되지 않은 초기 상태의 값이라는 의미입니다.

CSS 필터 함수 적용 예제

filter 속성은 CSS에서 제공하는 다양한 필터 함수 값을 사용할 수 있습니다.
하나의 필터 함수 값만을 사용할 수도 있고, 띄어쓰기로 구분해서 여러 개의 필터 함수 값을 사용해서 동시에 여러 필터 효과를 적용할 수도 있습니다. 어떤 함수의 매개변수가 유효하지 않다면, 어떤 필터 효과도 적용하지 않습니다.

다음은 filter 속성의 값으로 CSS에서 제공하는 필터 함수를 적용한 예제입니다.

blur()

요소에 흐림 효과(Gaussian blur)를 적용합니다.

매개변수는 CSS의 길이 단위(예: px, em 등)로 지정합니다. 단, 백분율(%) 단위는 지원하지 않습니다.

  • 기본값: blur(0)
  • 최솟값: blur(0)
  • 최댓값: 제한 없음
예제
CSS 
.img-1 {
    filter: blur(2px);
}
.img-2 {
    filter: blur(10px);
}
실제 적용된 모습

brightness()

요소에 밝기 조정 효과를 적용합니다.
기본값보다 작아질수록 어두워지고, 클수록 밝아집니다.

매개변수는 숫자 또는 백분율(%) 단위로 지정합니다.

  • 기본값: brightness(1) 또는 brightness(100%)
  • 최솟값: brightness(0) 또는 brightness(0%)
  • 최댓값: 제한 없음
예제
CSS 
.img-1 {
    filter: brightness(50%);
}
.img-2 {
    filter: brightness(150%);
}
실제 적용된 모습

contrast()

요소에 대비 조정 효과를 적용합니다.
기본값보다 작아질수록 대비를 낮추고, 클수록 높입니다.

매개변수는 숫자 또는 백분율(%) 단위로 지정합니다.

  • 기본값: contrast(1) 또는 contrast(100%)
  • 최솟값: contrast(0) 또는 contrast(0%)
  • 최댓값: 제한 없음
예제
CSS 
.img-1 {
    filter: contrast(50%);
}
.img-2 {
    filter: contrast(150%);
}
실제 적용된 모습

drop-shadow

요소에 그림자 효과를 적용합니다.

매개변수는 그림자 값(shadow syntax)으로 지정합니다.

  • 기본값: drop-shadow(0 0 0 currentcolor)
  • 최솟값: 제한 없음
  • 최댓값: 제한 없음
예제
CSS 
.img-1 {
    filter: drop-shadow(10px 10px 2px blue);
}
.img-2 {
    filter: drop-shadow(10px -10px 2px red);
}
실제 적용된 모습

grayscale()

요소에 흑백 효과를 적용합니다.

매개변수는 숫자 또는 백분율(%) 단위로 지정합니다.

  • 기본값: grayscale(0) 또는 grayscale(0%)
  • 최솟값: grayscale(0) 또는 grayscale(0%)
  • 최댓값: grayscale(1) 또는 grayscale(100%)
예제
CSS 
.img-1 {
    filter: grayscale(50%);
}
.img-2 {
    filter: grayscale(100%);
}
실제 적용된 모습

hue-rotate()

요소에 색상 회전를 적용합니다.

매개변수는 각도(deg, grad, rad, turn) 단위로 지정합니다.

  • 기본값: hue-rotate(0deg)
  • 최솟값: 제한 없음
  • 최댓값: 제한 없음
예제
CSS 
.img-1 {
    filter: hue-rotate(90deg);
}
.img-2 {
    filter: hue-rotate(180deg);
}
실제 적용된 모습

invert()

요소에 색상 반전를 적용합니다.

매개변수는 숫자 또는 백분율(%) 단위로 지정합니다.

  • 기본값: invert(0) 또는 invert(0%)
  • 최솟값: invert(0) 또는 invert(0%)
  • 최댓값: invert(1) 또는 invert(100%)
예제
CSS 
.img-1 {
    filter: invert(30%);
}
.img-2 {
    filter: invert(100%);
}
실제 적용된 모습

opacity()

요소에 투명도를 적용합니다.

매개변수는 숫자 또는 백분율(%) 단위로 지정합니다.

  • 기본값: opacity(1) 또는 opacity(100%)
  • 최솟값: opacity(0) 또는 opacity(0%)
  • 최댓값: opacity(1) 또는 opacity(100%)
예제
CSS 
.img-1 {
    filter: opacity(0.1);
}
.img-2 {
    filter: opacity(0.7);
}
실제 적용된 모습

saturate()

요소에 채도를 적용합니다.

매개변수는 숫자 또는 백분율(%) 단위로 지정합니다.

  • 기본값: saturate(1) 또는 saturate(100%)
  • 최솟값: saturate(0) 또는 saturate(0%)
  • 최댓값: 제한 없음
예제
CSS 
.img-1 {
    filter: saturate(0);
}
.img-2 {
    filter: saturate(200%);
}
실제 적용된 모습

sepia()

요소에 세피아(어두운 갈색) 효과를 적용합니다.

매개변수는 숫자 또는 백분율(%) 단위로 지정합니다.

  • 기본값: sepia(0) 또는 saturate(0%)
  • 최솟값: sepia(0) 또는 saturate(0%)
  • 최댓값: sepia(1) 또는 saturate(100%)
예제
CSS 
.img-1 {
    filter: sepia(50%);
}
.img-2 {
    filter: sepia(100%);
}
실제 적용된 모습

함수 조합

띄어쓰기를 구분해서 원하는 만큼 함수를 조합할 수 있습니다.

예제
CSS 
.img-1 {
    filter: sepia(100%) blur(5px);
}
.img-2 {
    filter: sepia(100%) blur(5px) contrast(175%);
}
실제 적용된 모습

형식 정의

filter 속성의 형식 정의
초깃값 none
적용 요소 모든 요소. SVG에서는 <defs> 요소와 모든 그래픽 요소가 없는 컨테이너 요소에 적용됩니다
상속 아니오
애니메이션
  • 시작과 끝이 동일한 필터 함수 값에서의 변환: 예
  • 시작과 끝이 동일하지 않은 필터 함수 값에서의 변환: 아니오
  • 필터 함수 값과 none의 변환: 예

브라우저 호환성

filter 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
filter 53 12 35 9.1

SVG 요소에서 filter 속성의 브라우저 호환성은 아직 완벽하지 않습니다.
caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

filter 속성의 명세서 사양
명세서 사양
filter Filter Effects Module Level 1
#FilterProperty

참고문헌

같이 보기