CSS 필터 생성기
CSS filter()와 backdrop-filter() 함수 체인을 원하는 순서로 구성하고, 직접 업로드한 사진에 실시간 미리 보기를 적용한 뒤 복사 가능한 CSS 한 줄과 PNG 내보내기까지 지원합니다.
🔒 전적으로 귀하의 브라우저에서 처리됩니다. 여기에 입력하는 어떤 것도 업로드되지 않습니다.
결과
대부분의 CSS 필터 생성기는 blur(), brightness(), contrast() 같은 함수를 중첩할 수 있게 해주지만, 순서가 결과에 영향을 미치는 경우는 거의 없습니다. 대개 정해진 한 가지 순서로만 필터를 적용하기 때문입니다. 이 도구는 다릅니다. 네이티브 HTML5 드래그 앤 드롭으로 만든 실제 순서 변경 가능한 목록으로 필터 체인을 구성하며, 두 함수의 배치를 바꾸면 실제 픽셀 결과가 달라집니다. 프로덕션 CSS에서와 정확히 같은 방식입니다. blur 다음 hue-rotate를 적용한 결과는 hue-rotate 다음 blur를 적용한 결과와 다르며, 이제는 코드를 배포하기 전에 그 차이를 확인할 수 있습니다.
직접 업로드한 사진에 아홉 가지 필터 함수(blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert, drop-shadow)를 `<img>` 요소에 실제 `filter` CSS 선언으로 적용하므로 시뮬레이션된 색상 패치가 아닌 실물에 가까운 결과를 제공합니다. 셀렉트에서 함수를 추가하고, 행을 드래그하여 체인 내 위치를 변경한 뒤 슬라이더를 조절하면, 모든 입력에 따라 미리 보기와 복사 가능한 `filter: ...;` 한 줄이 함께 갱신됩니다. 행에 있는 버튼으로 단계를 바로 제거할 수도 있습니다.
두 번째로 작은 체인은 미리 보기 위에 배치된 오버레이 패널에 적용할 `backdrop-filter` 값을 구성합니다. 이를 통해 반투명 유리 효과(현대적인 반투명 내비게이션 바나 모달 배경에 쓰이는 기법)를, 하단 이미지 자체의 필터 체인은 건드리지 않고 확인할 수 있습니다. 사진을 업로드하기 전에도 다채로운 플레이스홀더 배경을 통해 효과를 미리 볼 수 있어, 단 몇 초 만에 반투명 유리 패널 디자인을 완성할 수 있습니다.
미리 보기가 마음에 들면 출력 상자에서 CSS를 바로 복사하거나 실제 PNG로 내보낼 수 있습니다. 동일한 필터 문자열이 Canvas 2D 컨텍스트의 `ctx.filter` 속성에 전달되며, 이 속성은 CSS `filter` 속성과 동일한 구문을 사용합니다. 그런 다음 캔버스는 `canvas.toBlob()`을 통해 다운로드 가능한 파일로 변환됩니다. 내보낸 이미지는 동일한 필터 문자열이 동일한 렌더링 기반 요소를 통해 생성되었기 때문에 실시간 미리 보기와 정확히 일치합니다. 모든 작업은 브라우저 안에서 로컬로 이루어지며, 사진이 외부로 업로드되는 일은 절대 없습니다.