filter

filter CSS 속성은 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용합니다. 보통 필터는 이미지, 배경, 테두리 렌더링을 조정하는 데 쓰입니다.

CSS 표준은 미리 정의된 효과를 내는 몇 가지 함수를 포함하고 있습니다. SVG 필터 요소에 대한 URL 참조를 사용하여 SVG 필터를 적용할 수도 있습니다.

구문

/* SVG 필터를 가리키는 URL */
filter: url("filters.svg#filter-id");

/* <filter-function> 값 */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* 다중 값 */
filter: contrast(175%) brightness(3%);

/* 필터 없음 */
filter: none;

/* 전역 값 */
filter: inherit;
filter: initial;
filter: unset;

함수를 사용하려면 다음 구문을 사용하세요.

filter: <filter-function> [<filter-function>]* | none

SVG <filter> 요소에 대한 참조를 사용하려면 다음 구문을 사용하세요.

filter: url(svg-url#element-id)

filter 속성 간의 보간

속성 보간 시 처음과 끝 필터 모두가 <url> 값이 없고 길이가 같은 함수 목록일 경우, 각 필터 함수는 각각의 규칙을 따라 보간됩니다. 함수의 길이가 서로 다를 때는 긴 필터 목록에만 존재하는 필터를 짧은 필터 목록에 추가하며, 이 때 추가된 필터의 값으로는 누락 값(누락 시의 기본값)을 사용합니다. 이후 각 필터 함수는 동일한 길이일 때와 같은 방식으로 보간합니다. 만약 한쪽의 필터가 none일 경우 다른 쪽 필터 목록에서 모두 가져오고, 누락 값을 대입한 후 보간합니다. 이 외의 경우에는 이산적 보간을 사용합니다.

형식 구문

none | <filter-function-list>
where 
<filter-function-list> = [ <filter-function> | <url> ]+
where 
<filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <saturate()> | <sepia()>
where 
<blur()> = blur( <length> )
<brightness()> = brightness( <number-percentage> )
<contrast()> = contrast( [ <number-percentage> ] )
<drop-shadow()> = drop-shadow( <length>{2,3} <color>? )
<grayscale()> = grayscale( <number-percentage> )
<hue-rotate()> = hue-rotate( <angle> )
<invert()> = invert( <number-percentage> )
<opacity()> = opacity( [ <number-percentage> ] )
<saturate()> = saturate( <number-percentage> )
<sepia()> = sepia( <number-percentage> )
where 
<number-percentage> = <number> | <percentage>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

예제

미리 정의된 함수는 다음 예제처럼 사용할 수 있습니다. 각 함수 문서에서 더 자세한 내용을 살펴보세요.

.mydiv {
  filter: grayscale(50%);
}

/* 모든 이미지를 50% 흑백 처리하고 10px 흐리게 */
img {
  filter: grayscale(0.5) blur(10px);
}

URL 함수와 SVG 리소스를 사용하는 방법은 다음과 같습니다.

.target {
  filter: url(#c1);
}

.mydiv {
  filter: url(commonfilters.xml#large-blur);
}

함수

filter 속성은 none이나, 아래 함수를 하나 이상 사용해 지정할 수 있습니다. 어떤 함수의 매개변수가 유효하지 않다면, 그 함수는 none을 반환합니다. 따로 명시하지 않았다면, 백분율 값(34% 등)을 받는 함수는 그 백분율의 소수 표기(0.34 등)도 받을 수 있습니다.

SVG 필터

url()

SVG 필터를 가리키는 IRI를 받습니다. 외부 XML 파일에 포함된 필터도 가능합니다.

filter: url(resources.svg#c1)

필터 함수

blur()

주어진 이미지에 가우시안 블러를 적용합니다. radius 값은 정규분포의 표준 편차, 즉 화면에서 혼합할 픽셀의 수를 지정하므로 값이 클수록 이미지가 흐려집니다. 보간 시 누락값은 0입니다. 매개변수는 CSS 길이로 명시되어 있지만 백분율 값은 받지 않습니다.

filter: blur(5px)

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  </filter>
</svg>

brightness()

주어진 이미지에 상수 배를 적용하여 이미지를 밝거나 어둡게 표시합니다. 0%일 경우 완전히 검은색 이미지가 되고, 100%일 경우 이미지가 그대로 유지되며, 이외의 값은 효과의 강도로 작용합니다. 100%보다 큰 값도 허용되며, 이때는 더 밝은 이미지가 생성됩니다. 보간 시 누락값은 1입니다.

filter: brightness(0.5)
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="brightness">
    <feComponentTransfer>
      <feFuncR type="linear" slope="[amount]"/>
      <feFuncG type="linear" slope="[amount]"/>
      <feFuncB type="linear" slope="[amount]"/>
    </feComponentTransfer>
  </filter>
</svg>

contrast()

주어진 이미지의 대비를 조정합니다. 0%일 경우 완전히 회색 이미지가 되고, 100%일 경우 이미지가 그대로 유지됩니다. 100%보다 큰 값도 허용되며, 이때는 대비가 더 큰 이미지가 생성됩니다. 보간 시 누락값은 1입니다.

filter: contrast(200%)

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="contrast">
    <feComponentTransfer>
      <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
      <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
      <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
    </feComponentTransfer>
  </filter>
</svg>

drop-shadow()

주어진 이미지에 그림자 효과를 적용합니다. 이때 그림자는 주어진 이미지의 알파 마스크에 특정한 색상, 오프셋, 블러를 적용하고 이미지 밑에 합성한 것입니다. 이 함수는 inset 키워드를 제외하고 (CSS3 Backgrounds에 정의된) <shadow> 자료형의 매개변수를 그대로 받을 수 있습니다. 이 함수는보다 확립된 box-shadow 속성과 비슷하지만, 필터를 사용하면 일부 브라우저에서 성능 향상을 위해 하드웨어 가속을 사용한다는 차이점이 있습니다. <shadow> 값의 매개변수는 다음과 같습니다.

<offset-x> <offset-y> (필수)
그림자 오프셋을 설정하는 두 <length> 값입니다. <offset-x>는 가로 거리를 지정하며, 음수일 경우 그림자가 왼쪽에 배치됩니다. <offset-y>는 세로 거리를 지정하며, 음수일 경우 그림자가 위쪽에 배치됩니다. 가능한 단위는 <length>를 참조하십시오.
두 값이 모두 0이면 그림자가 요소 바로 밑에 배치되며, <blur-radius>나 <spread-radius>를 설정한 경우 블러 효과가 표시될 수 있습니다.
<blur-radius> (선택)
세 번째 <length> 값이며, 클수록 흐려지는 반경이 커지고 그림자가 옅어집니다. 음수 값은 사용할 수 없습니다. 값을 지정하지 않으면 0으로 취급합니다(날카로운 가장자리).
<spread-radius> (선택)
네 번째 <length> 값입니다. 양수 값을 지정하면 그림자가 확장되어 커지고 음수 값을 지정하면 그림자가 축소됩니다. 값을 지정하지 않으면 0으로 취급합니다(그림자 크기가 요소와 동일함).
<color> (선택)
가능한 키워드 및 표기법은 <color>를 참조하십시오. 값을 지정하지 않았을 때의 색상은 브라우저에 따라 다릅니다. 보통 <color> 속성의 값을 사용하지만, 현재 사파리는 이때 투명한 그림자를 표시합니다.
filter: drop-shadow(16px 16px 10px black)
<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
 <filter id="drop-shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
    <feFlood flood-color="[color]"/>
    <feComposite in2="offsetblur" operator="in"/>
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
</svg>

grayscale()

주어진 이미지를 흑백(grayscale)으로 변환합니다. amount 값은 흑백으로 전환되는 비율을 지정합니다. 100%일 경우 완전히 흑백 이미지가 되고, 0%일 경우 이미지가 그대로 유지되며, 그 사이의 값은 효과의 강도로 작용합니다. 보간 시 누락 값은 0입니다.

filter: grayscale(100%)

hue-rotate()

주어진 이미지에 색조 회전을 적용합니다. angle 값은 입력 샘플을 조절할 색상환 위의 각도입니다. 0deg일 경우 이미지가 그대로 유지됩니다. 보간 시 누락 값은 0입니다. 최댓값이 존재하지는 않지만, 360deg 이상의 값은 0deg과 360deg 사이를 순환합니다.

filter: hue-rotate(90deg)
<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgHueRotate" >
    <feColorMatrix type="hueRotate" values="[angle]" />
  <filter />
</svg>

invert()

주어진 이미지를 색반전합니다. amount 값은 색반전되는 비율을 지정합니다. 100%일 경우 완전히 색반전되고, 0%일 경우 이미지가 그대로 유지되며, 그 사이의 값은 효과의 강도로 작용합니다. 보간 시 누락 값은 0입니다.

filter: invert(100%)

opacity()

주어진 이미지를 (반)투명으로 변환합니다. amount 값은 불투명도를 지정합니다. 0%일 경우 완전히 투명해지고, 100%일 경우 이미지가 그대로 유지되며, 그 사이의 값은 효과의 강도로 작용하며, 이는 주어진 이미지 샘플을 amount만큼 곱하는 것과 같습니다. 보간 시 누락 값은 1입니다. 이 함수는 보다 확립된 opacity 속성과 비슷하지만, 필터를 사용하면 일부 브라우저에서 성능 향상을 위해 하드웨어 가속을 사용한다는 차이점이 있습니다.

filter: opacity(50%)

saturate()

주어진 이미지의 채도를 변경합니다. amount 값은 채도를 지정합니다. 0%일 경우 완전히 무채색이 되고, 100%의 경우 이미지가 그대로 유지되며, 이외의 값은 효과의 강도로 작용합니다. 100%보다 큰 값도 허용되며, 이때는 원본보다 채도가 큰 이미지가 생성됩니다. 보간 시 누락 값은 1입니다.

filter: saturate(200%)

sepia()

주어진 이미지를 세피아로 변환합니다. amount 값은 세피아로 변환할 비율을 정의합니다. 100%일 경우 완전히 세피아가 되고, 0%일 경우 이미지가 그대로 유지되며, 그 사이의 값은 효과의 강도로 작용합니다. 보간 시 누락 값은 0입니다.

filter: sepia(100%)

함수 조합

여러 개의 함수를 조합해서 렌더링을 조작할 수 있습니다. 다음 에제에서는 이미지의 대비와 밝기를 높입니다.

filter: contrast(175%) brightness(103%)

명세

명세 상태 비고
Filter Effects Module Level 1
The definition of 'filter' in that specification.		 Working Draft 초기 정의
초기값none
적용대상all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
상속no
Computed valueas specified
Animation typea filter function list

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
filterChrome Full support 53
Full support 53
Full support 18
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes In Chrome 18 to 19, the saturate() function only takes integers instead of decimal or percentage values. From Chrome 20, this bug is fixed.
Edge Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Full support 35
Full support 35
Partial support 34
Disabled
Disabled From version 34: this feature is behind the layout.css.filters.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 46
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 46: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support No
Notes
No support No
Notes
Notes Internet Explorer 4 to 9 implemented a non-standard filter property. The syntax was completely different from this one and is not documented here.
Opera Full support 40
Full support 40
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Full support 9.1
Full support 9.1
Full support 6
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 53
Full support 53
Full support 4.4
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 53Firefox Android Full support 35
Full support 35
Partial support 34
Disabled
Disabled From version 34: this feature is behind the layout.css.filters.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 46
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 46: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 41
Full support 41
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Full support 9.3
Full support 9.3
Full support 6
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support 6.0
On SVG elementsChrome No support NoEdge No support NoFirefox Full support 35IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 35Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

같이 보기