🎚️CSS 필터 생성기

filter의 함수와 단위

CSS의 filter 프로퍼티는 이미지나 요소의 외관에 효과를 적용하는 프로퍼티로, blur나 sepia 등의 함수를 반각 스페이스로 구분하여 나열합니다.

• px（픽셀）：blur 함수는 흐림의 반경을 px로 지정하는 함수로, 4px를 지정하면 반경 4 픽셀 범위에서 색이 자연스럽게 섞입니다.
• %（퍼센트）：brightness 함수나 sepia 함수는 효과의 강도를 %로 지정하는 함수로, brightness 함수에서 100%는 원본 밝기, 120%는 2할 밝게 한 상태입니다.
• deg（도）：hue-rotate 함수는 색상환 위에서 색을 회전시키는 각도를 deg로 지정하는 함수로, 180deg를 지정하면 색이 반대쪽 색상으로 이동합니다.

왜 순서에 따라 결과가 바뀌나요

filter에 나열한 함수는 왼쪽부터 순서대로 적용되어 앞의 효과를 적용한 결과에 다음 효과가 적용되므로, 나열하는 순서가 바뀌면 외관도 바뀔 수 있습니다. 예를 들어 흑백으로 만든 후 세피아를 적용하면 갈색 톤이 남고, 세피아를 적용한 후 흑백으로 만들면 갈색 톤이 사라집니다. 본 도구에서는 적용 순서가 고정되어 있지만, 생성된 CSS 코드를 편집하여 순서를 변경할 수 있습니다.

backdrop-filter와의 차이

filter와 backdrop-filter는 같은 함수를 사용할 수 있는 프로퍼티이지만, 효과를 적용하는 대상이 다릅니다.

• filter：filter는 지정한 요소 자체（이미지나 텍스트 등）의 외관에 효과를 적용하는 프로퍼티입니다.
• backdrop-filter：backdrop-filter는 지정한 요소의 뒤에 보이는 부분에 효과를 적용하는 프로퍼티로, 반투명 유리 같은 표현에 사용됩니다.