CSS filter를 슬라이더로 조정하며 미리보기와 코드를 만듭니다. 이미지뿐 아니라 모든 요소에 적용 가능.
CSS Filter

CSS 코드

CSS Filter 사용법

  1. 각 슬라이더로 원하는 효과를 조정합니다.
  2. 미리보기에서 결과를 즉시 확인합니다.
  3. 복사로 CSS 코드를 가져갑니다.
  4. 이미지·div·아무 요소에나 적용 가능합니다.

주요 기능

  • 8가지 필터 동시 조절
  • 실시간 미리보기 (그라데이션 배경에 효과 적용)
  • 한 번 클릭으로 CSS 코드 복사
  • 이미지·텍스트·div 어디든 적용 가능

활용 예시

  • 호버 시 이미지 밝기·채도 변화
  • 비활성화된 요소 흑백 처리 (grayscale)
  • 모달 뒤 배경 흐림 (blur)
  • 다크모드 자동 변환 (invert)
  • 분위기 있는 이미지 톤 조정

filter vs Canvas 차이

CSS filter는 화면 표시만 변경하며 원본 데이터는 그대로입니다. Canvas filter는 픽셀을 실제로 변환해 새 이미지를 만듭니다. 다운로드가 필요하면 Canvas, 시각 효과만이라면 CSS가 가볍습니다.

자주 묻는 질문

모든 브라우저에서 동작하나요?

모든 모던 브라우저에서 지원됩니다. IE 11은 미지원이지만 사용률이 0에 가까워 무시해도 됩니다.

filter와 backdrop-filter의 차이는?

filter는 요소 자체에 효과를 적용하고, backdrop-filter는 요소 뒤의 배경에 효과를 적용합니다 (글래스모피즘에 사용).

여러 필터를 동시에 적용하면 순서가 중요한가요?

네, 함수 순서대로 적용됩니다. blur(5px) brightness(150%)와 brightness(150%) blur(5px)는 결과가 약간 다를 수 있습니다.

성능에 영향을 주나요?

blur 값이 크거나(20px+) 많은 요소에 적용하면 모바일에서 느릴 수 있습니다. 핵심 영역에만 사용하세요.