분류: 개발 도구
CSS 필터 생성기
슬라이더로 CSS filter 선언을 실시간으로 만들기
블러, 밝기, 대비, 그레이스케일, 색조 회전, 반전, 불투명도, 채도, 세피아를 슬라이더로 조절하고, 조합된 효과를 실시간으로 미리보며, 결과로 만들어진 CSS filter 선언을 복사하세요.
출력
filter: none;
이 페이지의 모든 처리는 브라우저에서 이루어집니다. 업로드는 없습니다.
이 도구로 할 수 있는 일
CSS filter 속성은 원본 이미지를 편집하지 않고도 블러나 색상 조정 같은 그래픽 효과를 브라우저에서 직접 적용합니다. 여러 함수를 한 선언에 조합해서 손으로 작성하기는 번거로운데, 이 도구는 각 효과를 조절할 때마다 문자열을 대신 만들어주며 실제로 변경한 함수만 포함합니다.
사용 방법
- 슬라이더를 드래그해 각 필터 함수를 조절하세요.
- 미리보기 상자가 실시간으로 업데이트되는 것을 확인하세요.
- 생성된 filter 선언을 스타일시트에 복사해 넣으세요.
개인정보
이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.
자주 묻는 질문
- 요소가 아니라 배경 이미지에도 적용할 수 있나요?
- 네 — filter는 background-image가 있는 요소를 포함해 모든 요소에 적용됩니다. 요소 내용은 그대로 두고 뒤에 있는 배경만 흐리게 하고 싶다면 backdrop-filter를 대신 사용하세요.
- filter가 성능에 영향을 주나요?
- 복잡하거나 애니메이션이 적용된 필터, 특히 블러는 큰 크기에서 렌더링 비용이 클 수 있습니다. 애니메이션 필터를 배포하기 전에 실제 대상 기기에서 테스트해보세요.
- filter 함수의 순서가 왜 중요한가요?
- 각 함수는 이전 함수의 결과물에 적용되므로, grayscale(100%) sepia(50%)는 순서를 바꾸면 다르게 보일 수 있습니다. 이 도구는 고정된, 상식적인 순서로 함수를 적용합니다.