CSS filter 속성 총정리 - 이제 최신 브라우저에서 사용가능

 

안녕하세요 찐망고입니다.

스레드를 시작하다 보니 포스팅을 안 하게 되는 것도 있고..

ai로 지정된 댓글들도 보기 싫고

ai로만 이루어진 글이 판을 치면서 내용도 없는 글들의 애포가 날로 성장하는 게 배가 아프고

(아 이건 아닌가)

거두절미하고 오늘은 CSS의 filter속성에 대해서 포스팅해 봅니다

 

filter속성은 이미지, 텍스트, 요소 전체에 다양한 그래픽 효과를 적용하는 CSS속성인데요.

 

기본적으로는 이렇게 씁니다.

.element {
    filter: 효과이름(값);
}

 

여러 개의 필터를 사용할 땐 공백으로 구분하여 연속 적용이 가능합니다.

.element {
    filter: blur(5px) brightness(0.8) contrast(1.2);
}

 

 

주요 fiter효과에 대해서 알아볼까요

1) blur() - 흐림 효과

.element {
    filter: blur(10px);
}

 

- 요소 전체를 10px 만큼 흐리게(블러) 처리

- 숫자가 클수록 흐림 정도 증가

- 배경뿐만 아니라 텍스트, 이미지도 함께 흐려짐

 

 

2) brightness() - 밝기 조절

.element {
    filter: brightness(1.5);
}

 

- 요소의 밝기를 조절

- 1 = 원래 밝기, 0.5 = 50% 어두움, 2 = 200% 밝음

- brightness(0)을 사용하면 완전히 검은색이 됨

 

 

3) contrast() - 대비 조절

.element {
    filter: contrast(2);
}

 

- 대비(contrast)를 증가 또는 감소

- 1 = 원래 대비, 2 = 두 배 대비(강조), 0.5 = 절반(약한 대비)

 

 

4) grayscale() - 흑백 효과

.element {
    filter: grayscale(1);
}

 

- 이미지를 흑백(회색조)으로 변환

-  0 = 원래 색상, 1 = 완전히 흑백

- 애니메이션과 함께 사용하면 서서히 흑백으로 변하는 효과 가능

 

 

5) sepia() - 흑백 효과

.element {
    filter: sepia(1);
}

 

- 옛날 사진처럼 노란빛을 띠게 만듦

-  0 = 원래 색상, 1 = 완전히 세피아 톤

- 레트로 느낌의 디자인에 사용 가능

 

 

6) invert() - 색상 반전

.element {
    filter: invert(1);
}

 

- 이미지 및 요소의 색상을 반전(네거티브 효과)

-  0 = 원래 색상, 1 = 완전 반전

- 다크 모드 전환 시 활용 가능!

 

 

7) opacity() - 투명도 조절

.element {
    filter: opacity(0.5);
}

 

- 투명도 조절 (0 = 완전 투명, 1 = 불투명)

- opacity 속성과 같지만, filter 속성을 사용하면 애니메이션 적용이 쉬움

 

 

8) saturate() - 채도 조절

.element {
    filter: saturate(2);
}

 

- 색상의 채도(색 강도)를 조절

- 1 = 원래 색상, 0 = 완전 무채색, 2 = 두 배 채도

- 색이 강조된 느낌을 줄 때 유용

 

 

9) hue-rotate() - 색상 회전

.element {
    filter: hue-rotate(90deg);
}

 

- 색상을 색상환(컬러 휠) 기준으로 회전

- 0deg = 원래 색상, 360deg = 원래대로

- 색상을 변화시키는 애니메이션 효과에 유용

 

 

9) drop-shadow(x,y,blur,색상) - 색상 회전

.element {
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
}

 

- 기존 box-shadow와 달리이미지에도 그림자 적용 가능!

- x, y → 그림자 위치, blur → 번짐 정도, 색상 → 그림자 색상

- 배경이 투명한 PNG 이미지에도 그림자 적용 가능!

 

 

filter속성을 이용하여 애니메이션 효과를 줄 수도 있죠!

.element {
    filter: grayscale(0);
    transition: filter 0.5s ease-in-out;
}

.element:hover {
    filter: grayscale(1);
}

 

 

filter는 요소 자체에 효과를 주는 반면, 

backdrop-filter는 배경에만 적용된다는 차이가 있습니다.

 

두 번째 요소는 필터를 적용 filter: blur(3.75px)를 적용,

세 번째 요소는 backgrop-filter를 적용한 예시 이미지입니다.

 

IE를 제외한 최신 브라우저에서 모두 filter속성을 지원합니다.