CSS 필터 생성기

참고자료

CSS filter 속성이란?

CSS filter 속성은 블러, 색상 변경, 대비 조정과 같은 그래픽 효과를 요소에 적용합니다. 필터는 요소가 합성되기 전에 적용되며 테두리와 그림자를 포함한 전체 요소에 영향을 미칩니다. 여러 필터 함수를 하나의 선언에서 연결할 수 있습니다.

모든 CSS 필터 함수

blur(px): 가우시안 블러를 적용. 높은 값 = 더 많은 블러.
brightness(%): 밝기 조정. 100% = 원본, 0% = 완전히 검정.
contrast(%): 대비 조정. 100% = 원본, 0% = 완전히 회색.
grayscale(%): 그레이스케일로 변환. 0% = 원본, 100% = 완전히 회색.
hue-rotate(deg): 색상환에서 색상 회전. 0deg = 원본, 180deg = 반대 색상.
invert(%): 색상 반전. 0% = 원본, 100% = 완전히 반전.
opacity(%): 투명도 조정. 100% = 완전히 불투명, 0% = 완전히 투명.
saturate(%): 색상 채도 조정. 100% = 원본, 100% 이상 = 과포화.
sepia(%): 세피아 톤 적용. 0% = 원본, 100% = 완전히 세피아.

성능 고려사항

CSS 필터는 최신 브라우저에서 GPU 가속됩니다. 그러나 큰 영역에 필터를 적용하거나 필터 값을 애니메이션하면 리페인트가 발생할 수 있습니다. 최적 성능을 위해: 애니메이션할 요소에 will-change: filter를 사용하고 요소 뒤만 블러하려면 backdrop-filter를 선호하세요.

일반적인 사용 사례

이미지 호버 효과 — 기본 상태에서 그레이스케일, 호버 시 컬러.
비활성화 상태 — filter: grayscale(100%) opacity(50%)로 비활성화된 UI 요소 표현.
다크 모드 — filter: invert(1) hue-rotate(180deg)로 빠른 다크 모드.
배경 블러 — backdrop-filter: blur(10px)로 불투명 유리 효과.
빈티지 사진 — 세피아, 대비, 밝기를 조합하여 아날로그 필름 느낌.

개인정보보호

모든 필터 생성은 브라우저에서 100% 실행됩니다. 어떤 데이터도 서버로 전송되지 않습니다. 업로드된 이미지는 디바이스에 남습니다.