CSS 필터 생성기
blur, brightness, contrast, grayscale, sepia, saturate, hue-rotate, invert 슬라이더로 실시간 미리보기를 보며 CSS filter 값을 만들고 코드를 복사하세요 — 100% 브라우저에서 실행되며 업로드되지 않습니다.
CSS 필터 생성기
실시간 미리보기
결과
filter: none;
🔒 브라우저에서 처리되며 업로드되지 않습니다.
이 CSS 필터 생성기가 하는 일
슬라이더를 움직여 자주 쓰이는 8가지 필터 함수로 CSS filter 값을 만들 수 있습니다. 픽셀 단위의 blur(), 퍼센트 단위의 brightness()·contrast()·saturate(), 퍼센트 단위의 grayscale()·sepia()·invert(), 그리고 각도 단위의 hue-rotate()입니다. 미리보기 상자가 색상 있는 콘텐츠에 적용된 효과를 실시간으로 보여주고, filter: blur(2px) brightness(120%);처럼 바로 붙여넣을 수 있는 선언을 만들어 한 번의 클릭으로 복사할 수 있습니다.
기본값은 생략한 깔끔한 출력
실제로 바꾼 함수만 출력됩니다. 중립값 그대로인 항목 — blur·grayscale·hue-rotate·invert의 0, brightness·contrast·saturate의 100% — 은 생략되어 결과가 짧고 읽기 쉽게 유지됩니다. 모든 슬라이더가 중립값이면 값은 그냥 none이 되며, 이는 스타일시트나 인라인 style 속성에 바로 넣을 수 있는 유효한 filter 값입니다.
자주 묻는 질문
어떤 CSS 필터 함수를 지원하나요?
8가지입니다. blur(px), brightness(%), contrast(%), grayscale(%), sepia(%), saturate(%), hue-rotate(deg), invert(%)를 자유롭게 조합하면 이 순서대로 하나의 filter 값이 만들어집니다.
왜 일부 함수가 출력에서 빠지나요?
중립값 상태의 함수는 코드를 깔끔하게 유지하기 위해 생략됩니다. brightness·contrast·saturate는 100%, blur·grayscale·hue-rotate·invert는 0이 중립값이며, 아무것도 바꾸지 않으면 값은 none이 됩니다.
만든 내용이 서버로 업로드되나요?
아니요. 미리보기와 CSS는 모두 브라우저 안에서 자바스크립트로 생성됩니다. 어떤 내용도 전송·저장·업로드되지 않습니다.