CSS 필터 생성기
슬라이더로 blur·밝기·대비·채도 등을 조절해 CSS filter 코드를 즉시 생성
blur, brightness, contrast, grayscale, hue-rotate, saturate, sepia를 슬라이더로 조절하며 결과를 실시간 미리보기로 확인하는 도구입니다. 웹 퍼블리셔와 디자이너가 이미지·박스에 적용할 filter 값을 눈으로 맞춰보고 복사해 바로 쓰고 싶을 때 유용합니다.
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
사용 방법
- 슬라이더를 움직여 원하는 필터 효과를 조절합니다.
- 상단 미리보기 박스에서 적용 결과를 실시간으로 확인합니다.
- 완성된 filter CSS를 복사해 원하는 요소에 붙여넣습니다.
- 마음에 안 들면 초기화 버튼으로 기본값으로 되돌립니다.
자주 묻는 질문
- 기본값인 슬라이더도 CSS에 포함되나요?
- 아니요. 밝기·대비·채도 등이 기본값(100%)이거나 blur가 0인 필터는 결과 코드에서 자동으로 빠져, 꼭 필요한 값만 깔끔하게 생성됩니다.
- 입력한 값이 서버로 전송되나요?
- 전송되지 않습니다. 모든 계산과 미리보기는 여러분의 브라우저 안에서만 처리되며, 어떤 데이터도 서버로 보내지 않습니다.
- 여러 필터를 동시에 겹쳐 쓸 수 있나요?
- 네. 여러 슬라이더를 함께 조절하면 blur(2px) brightness(110%)처럼 공백으로 이어진 하나의 filter 값으로 합쳐져 생성됩니다.