filter
시도해보기
CSS filter
속성은 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용합니다. 보통 필터는 이미지, 배경, 테두리 렌더링을 조정하는 데 쓰입니다.
CSS 표준은 미리 정의된 효과를 내는 몇 가지 함수를 포함하고 있습니다. SVG 필터 요소 (en-US)를 가리키는 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>
(en-US) 요소에 대한 참조를 사용하려면 다음 구문을 사용하세요.
filter: url(svg-url#element-id)
보간
보간의 처음과 끝 필터의 함수 목록 길이가 같고, 그 안에 <url>
값이 없으면, 각 필터 함수는 스스로의 특정 규칙을 따라 보간됩니다. 함수의 길이가 서로 다를 때는 긴 필터 목록에만 존재하는 필터를 짧은 필터 목록에 추가하며, 이 때 추가된 필터의 값으로는 누락 값(누락 시의 기본값)을 사용합니다. 이후 각 필터 함수는 서로 동일한 길이일 때와 같은 방식으로 보간합니다. 만약 한쪽의 필터가 none
일 경우 다른 쪽 필터 목록을 모두 가져오고, 각각에 누락 값을 대입한 후 보간합니다. 이 외의 경우에는 이산적 보간을 사용합니다.
함수
filter
속성은 none
또는 아래의 함수를 하나 이상 사용해 지정할 수 있습니다. 어떤 함수의 매개변수가 유효하지 않다면, 그 함수는 none
을 반환합니다. 따로 명시하지 않으면 백분율 값(34%
등)을 받는 함수는 그 백분율의 소수 표기(0.34
등)도 받을 수 있습니다.
SVG 필터
필터 함수
blur()
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()
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()
constrast()
함수는 주어진 이미지의 대비를 조정합니다. 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()
drop-shadow()
(en-US) 함수는 주어진 이미지에 그림자 효과를 적용합니다. 이때 추가하는 그림자는, 주어진 이미지의 알파 마스크에 특정한 색상과 오프셋, 흐림 효과를 적용하고 이미지 밑에 합성한 것입니다. 이 함수는 inset
키워드를 제외하고 (CSS3 Backgrounds에 정의된) <shadow>
자료형의 매개변수를 그대로 받을 수 있습니다. drop-shadow()
는 보다 확립된 box-shadow
속성과 비슷하지만, 일부 브라우저에서는 필터를 사용했을 때 성능 향상을 위해 하드웨어 가속을 사용한다는 차이점이 있습니다. <shadow>
값의 매개변수는 다음과 같습니다.
<offset-x>
<offset-y>
(필수)- 그림자 오프셋을 설정하는 두
<length>
값입니다.<offset-x>
는 가로 거리를 지정하며, 음수일 경우 그림자가 왼쪽에 배치됩니다.<offset-y>
는 세로 거리를 지정하며, 음수일 경우 그림자가 위쪽에 배치됩니다. 가능한 단위는<length>
를 참조하세요.
두 값이 모두0
이면 그림자가 요소 바로 밑에 배치되며,<blur-radius>
나<spread-radius>
를 설정한 경우 흐림 효과를 표시할 수 있습니다. <blur-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()
(en-US) 함수는 주어진 이미지를 흑백으로 변환합니다. amount
값은 흑백으로 전환하는 비율을 지정합니다. 100%
일 경우 완전히 흑백 이미지가 되고, 0%
일 경우 이미지가 그대로 유지되며, 그 사이의 값은 효과의 선형 배수로 작용합니다. 보간 시 누락 값은 0
입니다.
filter: grayscale(100%)
hue-rotate()
hue-rotate()
(en-US) 함수는 주어진 이미지에 색조 회전을 적용합니다. 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()
invert()
(en-US) 함수는 주어진 이미지의 색을 반전합니다. amount
값이 변형 정도를 지정합니다. 100%
일 경우 색을 정반대로 바꾸고, 0%
일 경우 이미지를 그대로 유지하며, 그 사이의 값은 효과의 선형 배수로 작용합니다. 보간 시 누락 값은 0
입니다.
filter: invert(100%)
opacity()
opacity()
(en-US) 함수는 주어진 이미지의 불투명도를 설정합니다. amount
값이 변형 정도를 지정합니다. 0%
일 경우 완전히 투명해지고, 100%
일 경우 이미지를 그대로 유지하며, 그 사이의 값은 효과의 선형 배수로 작용합니다. 즉 주어진 이미지 샘플을 amount
와 곱하는 것과 같습니다. 보간 시 누락 값은 1
입니다. 이 함수는 보다 확립된 opacity
속성과 비슷하지만, 일부 브라우저에서는 필터를 사용했을 때 성능 향상을 위해 하드웨어 가속을 사용한다는 차이점이 있습니다.
filter: opacity(50%)
saturate()
saturate()
(en-US) 함수는 주어진 이미지의 채도를 변경합니다. amount
값이 변형 정도를 지정합니다. 0%
일 경우 완전히 무채색이 되고, 100%
일 경우 이미지를 그대로 유지하며, 그 사이의 값은 효과의 선형 배수로 작용합니다. 100%
보다 큰 값도 허용되며, 이때는 원본보다 채도가 큰 이미지를 생성합니다. 보간 시 누락 값은 1
입니다.
filter: saturate(200%)
sepia()
sepia()
(en-US) 함수는 주어진 이미지를 세피아로 변환합니다. amount
값이 변형 정도를 지정합니다. 100%
일 경우 완전히 세피아가 되고, 0%
에서는 이미지를 그대로 유지하며, 그 사이의 값은 효과의 선형 배수로 작용합니다. 보간 시 누락 값은 0
입니다.
filter: sepia(100%)
함수 조합
원하는 만큼 함수를 조합해서 그려지는 모습을 바꿀 수 있습니다. 다음 에제는 이미지의 대비와 밝기를 동시에 높입니다.
filter: contrast(175%) brightness(103%)
형식 정의
초기값 | none |
---|---|
적용대상 | all elements; In SVG, it applies to container elements excluding the defs (en-US) element and all graphics elements |
상속 | no |
Computed value | as specified |
Animation type | a filter function list |
형식 구문
filter =
none |
<filter-value-list>
<filter-value-list> =
[ <filter-function> | <url> ]+
<filter-function> =
<blur()> |
<brightness()> |
<contrast()> |
<drop-shadow()> |
<grayscale()> |
<hue-rotate()> |
<invert()> |
<opacity()> |
<sepia()> |
<saturate()>
<blur()> =
blur( <length>? )
<brightness()> =
brightness( <number-percentage>? )
<contrast()> =
contrast( <number-percentage>? )
<drop-shadow()> =
drop-shadow( <color>? &&
<length>{2,3} )
<grayscale()> =
grayscale( <number-percentage>? )
<hue-rotate()> =
hue-rotate( [ <angle> | <zero> ]? )
<invert()> =
invert( <number-percentage>? )
<opacity()> =
opacity( <number-percentage>? )
<sepia()> =
sepia( <number-percentage>? )
<saturate()> =
saturate( <number-percentage>? )
<color> =
<absolute-color-base> |
currentcolor |
<system-color> |
<device-cmyk()>
<absolute-color-base> =
<hex-color> (en-US) |
<named-color> |
transparent |
<rgb()> |
<rgba()> |
<hsl()> |
<hsla()> |
<hwb()> |
<lab()> |
<lch()> |
<oklab()> |
<oklch()> |
<color()>
<device-cmyk()> =
device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? )
<rgb()> =
rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? ) |
rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> =
hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> =
hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> =
lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> =
lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> =
oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> =
oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> =
color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<cmyk-component> =
<number> |
<percentage>
<alpha-value> =
<number> |
<percentage>
<hue> =
<number> |
<angle> |
none
<colorspace-params> =
<predefined-rgb-params> |
<xyz-params>
<predefined-rgb-params> =
<predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> =
<xyz-space> [ <number> | none ]{3}
<predefined-rgb> =
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
<xyz-space> =
xyz |
xyz-d50 |
xyz-d65
예제
필터 함수 적용하기
미리 정의된 함수는 다음 예제처럼 사용할 수 있습니다. 각 함수 문서에서 더 자세한 내용을 살펴보세요.
.mydiv {
filter: grayscale(50%);
}
/* 모든 이미지를 50% 흑백 처리하고 10px 흐리게 */
img {
filter: grayscale(0.5) blur(10px);
}
SVG 필터 적용하기
URL 함수와 SVG 리소스를 사용하는 방법은 다음과 같습니다.
.target {
filter: url(#c1);
}
.mydiv {
filter: url(commonfilters.xml#large-blur);
}
명세
명세 | 상태 | 비고 |
---|---|---|
Filter Effects Module Level 1 The definition of 'filter' in that specification. |
Working Draft | 초기 정의 |
브라우저 호환성
BCD tables only load in the browser
같이 보기
- HTML 콘텐츠에 SVG 효과 적용하기
mask
속성- SVG
- Understanding CSS filters (HTML5Rocks! 글)