SVG 필터 생성기
슬라이더로 흐림·밝기 등을 조절해 SVG 필터 코드 생성
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
블러, 밝기, 대비, 채도, 색조 회전, 세피아, 반전 등 8가지 효과를 슬라이더로 조절하며 결과를 원·사각형·별 모양 미리보기로 바로 확인할 수 있는 도구입니다. 완성된 효과는 <filter> SVG 코드와 CSS 적용 예시로 즉시 복사할 수 있어, 웹 디자이너나 프론트엔드 개발자가 CSS filter보다 정밀한 커스텀 필터를 만들 때 유용합니다. 모든 계산은 브라우저 안에서 이뤄지며 서버로 전송되지 않습니다.
사용 방법
- 미리보기 도형(원, 사각형, 별) 중 하나를 선택합니다
- 블러, 밝기, 대비, 채도, 색조 회전, 투명도, 세피아, 반전 슬라이더를 조절합니다
- 상단 미리보기에서 효과가 실시간으로 적용되는 것을 확인합니다
- 완성된 SVG 필터 코드를 복사 버튼으로 가져가 HTML/CSS에 붙여넣습니다
자주 묻는 질문
- CSS filter 속성과 무엇이 다른가요?
- SVG <filter>는 feComponentTransfer, feColorMatrix 등을 직접 조합해 만들기 때문에 CSS filter 단독 사용보다 더 세밀하고 유연한 제어가 가능합니다. 생성된 코드는 filter: url(#id) 형태로 CSS에서 그대로 적용할 수 있습니다.
- 생성한 필터를 실제 이미지에도 쓸 수 있나요?
- 네. 미리보기는 도형으로 표시되지만, 복사한 SVG 코드를 HTML에 삽입한 뒤 img나 다른 요소에 filter: url(#ut-custom-filter)를 적용하면 동일한 효과가 그대로 적용됩니다.
- 값을 초기 상태로 되돌리려면 어떻게 하나요?
- 초기화 버튼을 누르면 모든 슬라이더가 기본값(블러 0, 밝기·대비·채도·투명도 1, 색조 회전·세피아·반전 0)으로 돌아갑니다.