CSS filter 속성

filter

filter 속성은 요소의 시각적 표현을 조작하여 다양한 그래픽 효과를 적용할 수 있습니다. 주로 이미지, 텍스트, 배경에 사용되며, 브라우저에서 CSS 수준에서 효과를 처리하므로 빠르고 효율적입니다.

filter: <filter-function> [<filter-function> ...] | none;

• filter-function: 다양한 필터 함수.
• none: 필터 효과를 제거.
• 여러 필터를 공백으로 구분하여 한 번에 적용할 수 있습니다.
• 필터 효과는 요소뿐만 아니라 요소의 자식에게도 영향을 미칠 수 있습니다.
• 브라우저 지원: 대부분의 최신 브라우저에서 지원되며, 일부 오래된 브라우저에서는 제한이 있을 수 있습니다. (인터넷 익스플로러는 filter 대신 -ms-filter 사용 필요.) caniuse=filter

filter: blur(5px) brightness(1.5) contrast(0.8);

주요 필터 함수

1. blur()

요소를 흐리게 만듭니다.

• length: 흐림 정도를 픽셀 단위로 지정. 예: 5px.
• 기본값은 0 (흐림 없음).

filter: blur(10px); /* 10px 만큼 흐림 */

2. brightness()

요소의 밝기를 조정합니다.

• number: 0~1 사이 값은 어두워지고, 1 이상은 밝아짐.
• 기본값은 1 (원래 밝기).

filter: brightness(0.5); /* 밝기 50% */

3. contrast()

요소의 대비를 조정합니다.

• number: 0~1 사이 값은 대비를 낮추고, 1 이상은 대비를 높임.
• 기본값은 1 (원래 대비).

filter: contrast(2); /* 대비를 두 배로 증가 */

4. grayscale()

요소를 흑백으로 변환합니다.

• percentage: 흑백 정도를 백분율로 설정. 0%는 원래 색상, 100%는 완전 흑백.
• 기본값은 0.

filter: grayscale(100%); /* 완전 흑백 */

5. hue-rotate()

요소의 색상을 회전(색조 변화)시킵니다.

• angle: 색상을 회전시킬 각도. 단위는 deg (도). 0~360 사이 값을 사용.
• 기본값은 0deg (색상 변화 없음).

filter: hue-rotate(90deg); /* 색상을 90도 회전*/

6. invert()

요소의 색상을 반전시킵니다.

• percentage: 색상 반전 정도. 0%는 원래 색상, 100%는 완전 반전.
• 기본값은 0%.

filter: invert(100%); /* 색상 완전 반전 */

7. opacity()

요소의 투명도를 조정합니다.

• percentage: 투명도 비율을 백분율로 설정. 0%는 완전 투명, 100%는 불투명.
• 기본값은 100%.

filter: opacity(50%); /* 투명도 50% */

8. saturate()

요소의 색상 채도를 조정합니다.

• number: 0~1 사이 값은 채도를 낮추고, 1 이상은 채도를 높임.
• 기본값은 1 (원래 채도).

filter: saturate(200%); /* 채도를 두 배로 증가 */

9. sepia()

요소를 세피아 톤으로 변환합니다.

• percentage: 세피아 적용 정도를 백분율로 설정. 0%는 원래 색상, 100%는 완전 세피아.
• 기본값은 0%.

filter: sepia(100%); /* 완전 세피아 톤 */

10. drop-shadow()

요소에 그림자를 추가합니다. box-shadow와 비슷하지만, 투명도 영역에만 그림자를 적용.

• h-offset v-offset [blur-radius][spread-radius] color:
• h-offset: 가로 오프셋.
• v-offset: 세로 오프셋.
• blur-radius: 그림자 흐림 정도 (옵션).
• spread-radius: 그림자 크기 확장 정도 (옵션).
• color: 그림자 색상.
• 기본값은 없음.

filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));